vue.js开发技巧

1. setTimeout/ setInterval

• 场景一 ：this指向改变没法用this访问vue实例

  mounted(){
    setTimeout( function () {
    //setInterval同理
    console.log(this); //此时this指向Window对象
    }，1000) ;
    }

• 解决方法 :使用箭头函数或者缓存this

  //箭头函数访问this实例由于箭头函数自己没有绑定this
      setTimeout(() => {
    	console. log(this);},  500) ;
    	//使用变量访问this实例let self=this;
      },1000);
      setTimeout (function () {
    	console. log(self);//使用self变量访问this实例
      }, 1000) ;

setInterval路由跳转继续运行并无销毁

• 场景一 :好比一些弹幕，走马灯文字，这类须要定时调用的，路由跳转以后，由于组件已经销毁了，可是setlnterval尚未销毁，还在继续后台调用，控制台会不断报错，若是运算量大的话，没法及时清除，会致使严重的页面卡顿。

• 解决方法 :在组件生命周期beforeDestroy中止setInterval

  created() {
    	   this.intervalid = setInterval(() => {
    		  this.layerError = "";
    		  this.Timer = null;
    	  }, 100000);
       }
      beforeDestroy( ){
    	//我一般是把setInterval( )定时器赋值给this实例，而后就能够像下面这么暂停。
    	clearInterval(this.intervalid);
      }

2. Vue路由拦截浏览器后退实现草稿保存相似需求

• 场景一 :为了防止用户忽然离开，没有保存已输入的信息。

• 解决方法 :

  //在路由组件中:mounted(){}，
      beforeRouteLeave (to, from, next) {
    	  if(用户已经输入信息){
    		//出现弹窗提醒保存草稿，或者自动后台为其保存
    	  }else{
    		next(true);//用户离开
    	  }
      }

3. 自定义组件添加click等事件不生效

• 场景一 :一些自定义组件，须要额外添加一些事件来实现一些特定需求

  <template>
    	<el-progress type="circle" :percentage=“0" @click=“stopProgress”></elprogress>
    </template>
    <script>
    	export default {
    		methods:{
    			stopProgress() { 
    				console.log('中止')
    			}
    		}
    	}
    </script>

• 解决方法:使用.native修饰符

  <template>
    	<el-progress type="circle" :percentage=“0" @click.native=“stopProgress”></el-progress>
    </template>
    <script>
    	export default {
    		methods:{
    			stopProgress() { 
    				console.log('中止')
    		}
    	}
    }
    </script>

4. Vue数组/对象更新视图不更新

• 场景一 :不少时候咱们习惯于这样操做数组和对象

  data() { 
    	return {
    		arr: [1,2,3],
    		obj:{
    		  a: 1,
    		  b: 2 
    		}
    	}; 
      },
  
      // 数组更新视图不更新
      this.arr[0] = 'OBKoro1';
      this.arr.length = 1;
      console.log(arr);// ['OBKoro1']; 
      // 数据更新，对象视图不更新     
      this.obj.c = 'OBKoro1';
      delete this.obj.a;
      console.log(obj);  // {b:2,c:'OBKoro1'}

• 解决方法 ：

  • this. $set(你要改变的数组/对象，你要改变的位置/key,你要改为什么value)

  • 数组原生方法触发视图更新（ vue官网可查）:

  • 总体替换数组/对象

5. Vue深度watch与watch当即触发回调

• 场景一 :在watch里面监测对象里面对应的值是监测不到的，能够用以下方法。

  • 选项: deep 在选项参数中指定deep:true,能够监听对象中子属性的变化。

  • 选项: immediate 在选项参数中指定immediate:true,将当即以表达式的当前值触发回调，也就是默认触发一次。

    watch: {
    	obj: {
    		handler(val, oldVal) {
    		  console.log('属性变化触发这个回调',val, oldVal); 
    		},
    		deep: true // 监测这个对象中每个属性的变化
    	},
    	step: { // 属性 //watch
    	   handler(val, oldVal) {
    		console.log("默认触发一次", val, oldVal); 
    	   },
    	   immediate: true // 默认触发一次
    	}
      }