参考文章:10个Vue开发技巧
一、路由参数解耦
知道这个写法,但是没有使用过,可参考笔记vue-router 五。
二、函数式组件
函数式组件是无状态的,无法实例化,没有任何生命周期和方法。创建函数式组件,只需要在template 标签上加 functional即可。一般只适合依赖于外部数据的变化而变化的组件,因其轻量,渲染性能也会有所提高。
组件需要的一切都是通过context参数传递。可以通过props取到所有传入的attribute。
三、样式穿透
看到过这种写法,但是以前一直不太确定应用范围。
第三方组件的样式常常被scoped了,但是我们有时会需要修改第三方组件样式,这时就可以使用 '>>>' 或 '/deep/'来解决这个问题
四、watch高阶写法
1.立即执行
watch是在监听属性改变时才会触发,但是有时我们希望在组件创建后watch能够立即执行,只需要在监听的这个属性里设置immediate为truej就好了。
以前就看过这个写法,但是不知道用在什么地方。好像前段时间有需要用到这个属性,但是没想起来这个用法,用别的方式解决的。
2.深度监听
常用
3.一个属性触发watch时可以执行多个方法
用数组设置多个方法
五、watch监听多个变量
watch本身做不到,但是我们可以讲需要监听的多个变量通过计算属性返回一个对象,再深度监听这个对象来实现多个变量的监听
六、事件参数$event
1.原生事件中表现和默认事件对象相同
2.自定义事件中则是被抛出的值
七、自定义组件的双向绑定
知道相应的写法,可参考笔记vue官方指南深入部分笔记 三(2)。
八、监听组件的生命周期
直接在使用组件时用@hook:mounted="listenMounted",不需要在组件内部的生命周期中抛出自定义事件。
九、程序化的事件侦听器
知道相应的写法,可参考笔记vue官方指南深入部分笔记 六(2)。
十、手动挂载组件
比如一个弹窗组件,最理想的用法是通过命令式调用,而不是在模板中通过状态切换。通过vue.extend()和$mount来实现。