.a>>>.b{/*...*/}前言 大家好，我是@IT·平头哥联盟，我是首席甩货官—老金，今天给大家分享一些玄乎又玄乎的东西日常生活vue的简单实用技巧，以及我在我们公司项目中使用vue的总结和误区，分享给大家，希望能给其他攻城狮们带来一些方便。如有误解，敬请指正。Tips/坑点1.setTimeout/setInterval场景一：this指向改变不能用this访问vue实例mounted(){setTimeout(function(){//setInterval同console.log(this);//this此时指向Window对象},1000);}解决方案：使用箭头函数或者缓存this//箭头函数访问this实例是因为箭头函数本身没有绑定thissetTimeout(()=>{console.log(this);},500);//使用变量来访问这个实例letself=this;},1000);setTimeout(function(){console.log(self);//使用self变量访问本实例},1000);setInterval路由跳转继续运行且场景一无破坏：比如一些弹幕和转灯文字，需要定时调用，路由跳转后，因为组件已经销毁，但是setlnterval还没有销毁，后台调用还在继续，console会继续报错。如果计算量大，不能及时清除，会造成严重的页面卡顿。解决方法：在组件生命周期beforeDestroycreated()中停止setInterval{this.intervalid=setInterval(()=>{this.layerError="";this.Timer=null;},100000);}beforeDestroy(){//我通常会为这个实例分配setInterval()定时器，然后我可以像这样暂停。clearInterval(this.intervalid);}2.vue路由拦截浏览器返回，实现草稿保存类似需求场景一：为了防止用户突然离开，输入的信息不保存。解决方法：//在路由组件中：mounted(){},beforeRouteLeave(to,from,next){if（用户已经输入信息）{//会出现弹窗提醒保存草稿，或者后台自动保存}else{next(true);//用户离开}}3.自定义组件添加点击等事件不生效场景一：某些自定义组件需要添加一些额外的事件来实现一些具体要求解决方法：使用.native修饰符4、手动操作自定义组件场景一：部分自定义组件需要获取一些其他D的组件对象om操作方案：使用ref属性暴露组件获取句柄五、深度效果选择器场景一：scoped样式，希望影响子组件的默认样式在样式中设置scoped后，浏览器解析如下图，a是一个div,adiv包含一个组件，该组件已将div的样式名称解析为b。如果想在父组件中影响子组件的默认样式，解决方法：.a>>>.b{/*...*/}//一些像Sass这样的预处理器不要正确解析>>>。在这种情况下，您可以使用/deep/运算符代替----它是>>>的别名，并且同样有效。.a/deep/.b{/*...*/}6.vue数组/对象更新视图不??更新场景一：很多时候我们习惯操作这样的数组和objectdata(){return{arr:[1,2,3],obj:{a:1,b:2}};},//数组更新视图不??更新this.arr[0]='OBKoro1';这个.arr.length=1;console.log(arr);//['OBKoro1'];//数据更新了，对象视图没有更新this.obj.c='OBKoro1';删除this.obj.a；控制台日志（对象）；//{b:2,c:'OBKoro1'}解决方案：这个。$set(要改变的数组/对象，要改变的位置/键，要改变什么值)数组原生方法触发视图更新(可以在vue官网找到)：将array/object替换为7.VueFilters过滤器使用场景一：常用数据文本格式化div>{{message|DateFormat}}
