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

　　前言
　　写了两年的Vue，期间学习到好几个提高开发效率和性能的技巧，现在把这些技巧用文章的形式总结下来。1。巧用attrs和listeners
　　attrs用于记录从父组件传入子组件的所有不被props捕获以及不是class与style的参数，而listeners用于记录从父组件传入的所有不含。native修饰器的事件。那下面的代码作例子：Vue。component（child，｛props：〔title〕，template：h3｛｛title｝｝h3｝）newVue（｛data：｛a：1，title：title｝，methods：｛handleClick（）｛。。。｝，handleChange（）｛。。。｝｝，template：childclasschildwidth：aab1：titletitleclick。nativehandleClickchangehandleChange，｝）
　　则在在中attrs的值为｛a：1，b：1｝listeners的值为｛change：handleChange｝
　　通常我们可以用attrs和listeners作组件通信，在二次封装组件中使用时比较高效，如：Vue。component（customdialog，｛通过vbindattrs和vonlisteners把父组件传入的参数和事件都注入到eldialog实例上template：eldialogvbindattrsvonlistenerseldialog，｝）；newVue（｛data：｛visible：false｝，这样子就可以像在eldialog一样用visible控制customdialog的显示和消失template：customdialog：visible。syncvisible，｝）；
　　再举个例子：Vue。component（customselect，｛template：elselectvbindattrsvonlistenerseloptionvalue选项1label黄金糕eloptionvalue选项2label双皮奶elselect，｝）；newVue（｛data：｛value：｝，vmodel在这里其实是vbind：value和von：change的组合，在customselect里，通过vbindattrsvonlisteners的注入，把父组件上的value值双向绑定到customselect组件里的elselect上，相当于elselectvmodelvalue与此同时，在customselect注入的size变量也会通过vbindattrs注入到elselect上，从而控制elselect的大小template：customselectvmodelvaluesizesmall，｝）；2。巧用props
　　porps用于记录从父组件传入子组件的所有被props捕获以及不是class与style的参数。如Vue。component（child，｛props：〔title〕，template：h3｛｛title｝｝h3｝）newVue（｛data：｛a：1，title：title｝，methods：｛handleClick（）｛。。。｝，handleChange（）｛。。。｝｝，template：childclasschildwidth：aab1：titletitle，｝）
　　则在在中，props的值为｛title：title｝。props可以用于自组件和孙组件定义的props都相同的情况，如：Vue。component（grandchild，｛props：〔a，b〕，template：h3｛｛ab｝｝h3｝）child和grandchild都需要用到来自父组件的a与b的值时，在child中可以通过vbindprops迅速把a与b注入到grandchild里Vue。component（child，｛props：〔a，b〕，template：｛｛a｝｝加｛｛b｝｝的和是：grandchildvbindprops｝）newVue（｛template：childclasschildwidth：a1：b2，｝）3。妙用函数式组件
　　函数式组件相比于一般的vue组件而言，最大的区别是非响应式的。它不会监听任何数据，也没有实例（因此没有状态，意味着不存在诸如created，mounted的生命周期）。好处是因只是函数，故渲染开销也低很多。
　　把开头的例子改成函数式组件，代码如下：4。妙用Vue。config。devtools
　　其实我们在生产环境下也可以调用vuedevtools去进行调试，只要更改Vue。config。devtools配置既可，如下所示：务必在加载Vue之后，立即同步设置以下内容该配置项在开发版本默认为true，生产版本默认为falseVue。config。devtoolstrue；
　　我们可以通过检测cookie里的用户角色信息去决定是否开启该配置项，从而提高线上bug查找的便利性。5。妙用methods
　　Vue中的method可以赋值为高阶函数返回的结果，例如：
　　上面的search函数赋值为debounce返回的结果，也就是具有防抖功能的请求函数。这种方式可以避免我们在组件里要自己写一遍防抖逻辑。
　　这里有个例子sandbox，大家可以点进去看看经过高阶函数处理的method与原始method的效果区别，如下所示：
　　除此之外，method还可以定义为生成器，如果我们有个函数需要执行时很强调顺序，而且需要在data里定义变量来记录上一次的状态，则可以考虑用生成器。
　　例如有个很常见的场景：微信的视频通话在接通的时候会显示计时器来记录通话时间，这个通话时间需要每秒更新一次，即获取通话时间的函数需要每秒执行一次，如果写成普通函数则需要在data里存放记录时间的变量。但如果用生成器则能很巧妙地解决，如下所示：templateh3｛｛timeFormat｝｝h3template
　　页面效果如下所示：
　　代码地址：codesandbox
　　但需要注意的是：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。valuethis。options。data（）。value；
　　这样子就可以在初始值由于需求需要更改时，只在data中更改即可。
　　这里再举一个场景：一个eldialog中有一个elform，我们要求每次打开eldialog时都要重置elform里的数据，则可以这么写：templateelbuttonclickvisible！visible打开弹窗elbuttoneldialogopeninitFormtitle个人资料：visible。syncvisibleelformelformitemlabel名称elinputvmodelform。nameelformitemelformitemlabel性别elradiogroupvmodelform。genderelradiolabelmale男elradioelradiolabelfemale女elradioelradiogroupelformitemelformeldialogtemplate
　　每次eldialog打开之前都会调用其open中的方法initForm，从而重置form值到初始值。如下效果所示：
　　以上代码放在sanbox里
　　如果要重置data里的所有值，可以像下面这么写：Object。assign（this。data，this。options。data（））；注意千万不要写成下面的样子，这样子就更改this。data的指向。使得其指向另外的与组件脱离的状态this。datathis。options。data（）；8。妙用vpre，voncevpre
　　vpre用于跳过被标记的元素以及其子元素的编译过程，如果一个元素自身及其自元素非常打，而又不带任何与Vue相关的响应式逻辑，那么可以用vpre标记。标记后效果如下：
　　vonce
　　只渲染元素和组件一次。随后的重新渲染，元素组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
　　对于部分在首次渲染后就不会再有响应式变化的元素，可以用vonce属性去标记，如下：elselecteloptionvforiteminoptionsvonce：keyitem。value：labelitem。label：valueitem。value｛｛i｝｝eloptionelselect
　　如果上述例子中的变量options很大且不会再有响应式变化，那么如例子中用上vonce对性能有提升。9。妙用hook事件
　　如果想监听子组件的生命周期时，可以像下面例子中这么做：templatechildhook：mountedremoveLoadingtemplate
　　这样的写法可以用于处理加载第三方的初始化过程稍漫长的子组件时，我们可以加loading动画，等到子组件加载完毕，到了mounted生命周期时，把loading动画移除。
　　初次之外hook还有一个常用的写法，在一个需要轮询更新数据的组件上，我们通常在created里开启定时器，然后在beforeDestroy上清除定时器。而通过hook，开启和销毁定时器的逻辑我们都可以在created里实现：
　　像上面这种写法就保证了逻辑的统一，遵循了单一职责原则。