10个Vue开发技巧

参考文章：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来实现。