十分钟，让你学会Vue的这些巧妙冷技巧

　　前言
　　写了两年的Vue  ，期间学习到好几个提高开发效率和性能的技巧，现在把这些技巧用文章的形式总结下来。1. 巧用$attrs和$listeners
　　$attrs  用于记录从父组件传入子组件的所有不被props  捕获以及不是class  与style  的参数，而$listeners  用于记录从父组件传入的所有不含.native  修饰器的事件。那下面的代码作例子：Vue.component(＂child＂, {   props: [＂title＂],   template: ＂
{{ title }}
＂ })  new Vue({   data:{a:1,title:＂title＂},   methods:{     handleClick(){       // ...     },     handleChange(){       // ...     }   },   template:＂     ＂,  })
　　则在  在中attrs  的值为{a:1,b:＂1＂}  listeners  的值为{change: handleChange}
　　通常我们可以用$attrs  和$listeners  作组件通信，在二次封装组件中使用时比较高效，如：Vue.component(＂custom-dialog＂, {   // 通过v-bind=＂$attrs＂和v-on=＂$listeners＂把父组件传入的参数和事件都注入到el-dialog实例上   template: ＂＂, });  new Vue({   data: { visible: false },   // 这样子就可以像在el-dialog一样用visible控制custom-dialog的显示和消失   template: ＂＂, });
　　再举个例子：Vue.component(＂custom-select＂, {   template: `             `, });  new Vue({   data: { value: ＂＂ },   // v-model在这里其实是v-bind:value和v-on:change的组合，   // 在custom-select里，通过v-bind=＂$attrs＂ v-on=＂$listeners＂的注入，   // 把父组件上的value值双向绑定到custom-select组件里的el-select上，相当于   // 与此同时，在custom-select注入的size变量也会通过v-bind=＂$attrs＂注入到el-select上，从而控制el-select的大小   template: ＂＂, }); 2. 巧用$props
　　$porps  用于记录从父组件传入子组件的所有被props  捕获以及不是class  与style  的参数。如Vue.component(＂child＂, {   props: [＂title＂],   template: ＂
{{ title }}
＂ })  new Vue({   data:{a:1,title:＂title＂},   methods:{     handleClick(){       // ...     },     handleChange(){       // ...     }   },   template:＂     ＂,  })
　　则在  在中，$props  的值为{title:＂title＂}  。$props  可以用于自组件和孙组件定义的props  都相同的情况，如：Vue.component(＂grand-child＂, {   props: [＂a＂,＂b＂],   template: ＂
{{ a + b}}
＂ })  // child和grand-child都需要用到来自父组件的a与b的值时， // 在child中可以通过v-bind=＂$props＂迅速把a与b注入到grand-child里 Vue.component(＂child＂, {   props: [＂a＂,＂b＂],   template: `        {{a}}加{{b}}的和是：           ` })  new Vue({   template:＂     ＂, }) 3. 妙用函数式组件
　　函数式组件相比于一般的vue  组件而言，最大的区别是非响应式的。它不会监听任何数据，也没有实例（因此没有状态，意味着不存在诸如created  ，mounted  的生命周期）。好处是因只是函数，故渲染开销也低很多。
　　把开头的例子改成函数式组件，代码如下： 4. 妙用 Vue.config.devtools
　　其实我们在生产环境下也可以调用vue-devtools  去进行调试，只要更改Vue.config.devtools  配置既可，如下所示：// 务必在加载 Vue 之后，立即同步设置以下内容 // 该配置项在开发版本默认为 `true`，生产版本默认为 `false` Vue.config.devtools = true;
　　我们可以通过检测cookie  里的用户角色信息去决定是否开启该配置项，从而提高线上 bug 查找的便利性。5. 妙用 methods
　　Vue  中的method  可以赋值为高阶函数返回的结果，例如：
　　上面的search  函数赋值为debounce  返回的结果，  也就是具有防抖功能的请求函数。这种方式可以避免我们在组件里要自己写一遍防抖逻辑。
　　这里有个例子sandbox，大家可以点进去看看经过高阶函数处理的method  与原始method  的效果区别，如下所示：
　　除此之外，method  还可以定义为生成器，如果我们有个函数需要执行时很强调顺序，而且需要在data  里定义变量来记录上一次的状态，则可以考虑用生成器。
　　例如有个很常见的场景：微信的视频通话在接通的时候会显示计时器来记录通话时间，这个通话时间需要每秒更新一次，即获取通话时间的函数需要每秒执行一次，如果写成普通函数则需要在data  里存放记录时间的变量。但如果用生成器则能很巧妙地解决，如下所示：
　　页面效果如下所示：
　　代码地址：code sandbox
　　但需要注意的是：method 不能是箭头函数
　　注意，不应该使用箭头函数来定义   method   函数 (例如 plus: () => this.a++  )。理由是箭头函数绑定了父级作用域的上下文，所以 this   将不会按照期望指向 Vue 实例，this.a   将是 undefined  。6. 妙用 watch 的数组格式
　　很多开发者会在watch  中某一个变量的handler  里调用多个操作，如下所示：
　　虽然fn1  和fn2  都需要在value  变动的时候调用，但两者的调用时机可能不同。fn1  可能仅需要在deep  为false  的配置下调用既可。因此，Vue  在watch  的值添加了Array  类型来针对上面所说的情况，如果用watch  为Array  的写法处理可以写成下面这种形式： 7. 妙用$options
　　$options  是一个记录当前Vue  组件的初始化属性选项。通常开发中，我们想把data  里的某个值重置为初始化时候的值，可以像下面这么写：this.value = this.$options.data().value;
　　这样子就可以在初始值由于需求需要更改时，只在data  中更改即可。
　　这里再举一个场景：一个el-dialog  中有一个el-form  ，我们要求每次打开el-dialog  时都要重置el-form  里的数据，则可以这么写：
　　每次el-dialog  打开之前都会调用其@open  中的方法initForm  ，从而重置form  值到初始值。如下效果所示：
　　以上代码放在sanbox里
　　如果要重置data  里的所有值，可以像下面这么写：Object.assign(this.$data, this.$options.data()); // 注意千万不要写成下面的样子，这样子就更改this.$data的指向。使得其指向另外的与组件脱离的状态 this.$data = this.$options.data(); 8. 妙用 v-pre,v-oncev-pre
　　v-pre  用于跳过被标记的元素以及其子元素的编译过程，如果一个元素自身及其自元素非常打，而又不带任何与Vue  相关的响应式逻辑，那么可以用v-pre  标记。标记后效果如下：
　　v-once
　　只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
　　对于部分在首次渲染后就不会再有响应式变化的元素，可以用v-once  属性去标记，如下：   {{i}} 
　　如果上述例子中的变量options  很大且不会再有响应式变化，那么如例子中用上v-once  对性能有提升。9. 妙用 hook 事件
　　如果想监听子组件的生命周期时，可以像下面例子中这么做：
　　这样的写法可以用于处理加载第三方的初始化过程稍漫长的子组件时，我们可以加loading  动画，等到子组件加载完毕，到了mounted  生命周期时，把loading  动画移除。
　　初次之外hook  还有一个常用的写法，在一个需要轮询更新数据的组件上，我们通常在created  里开启定时器，然后在beforeDestroy  上清除定时器。而通过hook  ,开启和销毁定时器的逻辑我们都可以在created  里实现：
　　像上面这种写法就保证了逻辑的统一，遵循了单一职责原则。