总结Vue的小技巧

1.setTimeout/ setInterval

this只想改变，无法用this访问vue实例

	mouted(){
		setTimeout(function(){
			console.log(this)//此时this指向window对象
		},1000)
	}

为解决这个问题，使用箭头函数或者先缓存this

	mouted(){
		setTimeout(()=>{
			console.log(this)
		},1000)
	}
	或者：
	let self=this;
	mouted(){
		setTimeout(()=>{
			console.log(self)
		},1000)
	}	

使用setInterval的时候需要销毁，不然有可能造成程序崩溃

	mouted(){
		this.timer=setInterval(()=>{
			console.log(self)
		},1000)
	},
	beforeDestroy(){
		clearInterval(this.timer)
	}	
	

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.手动操控自定义组件

一些自定义组件，需要去获取组件对象进行一些其他的Dom操作
解决方法 :使用ref属性暴露组件获取句柄

	<template>
    <el-progress type="circle" :percentage="O" ref="progress"></el-progress>
    </template>
  <script>
    this.$refs.progress //组件对象实例， 可以手动调用组件的内置方法和属性
    this.$refs.progress.$el //组件 对象的最外层dom元素
  </script>

5.深度作用选择器

scoped的样式，希望影响到子组件的默认样式

	<style scoped>
    .a >>> .b { /* ... */ }
  </style>
    //有些像Sass之类的预处理器无法正确解析>>>。这种情况下你可以使用/deep/操作符取而代之
    //- - - -这是一个>>>的别名，同样可以正常工作。
  <style scoped lang=“scss”>
    .a /deep/ .b { /* ... */ }
  </style>复制代码

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

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

解决方法 ：

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

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

整体替换数组/对象

	 data() { 
	    return {
	        arr: [1,2,3],
	        obj:{
	          a: 1,
	          b: 2 
	        }
	    }; 
	  },
	  this.$set(this.arr,0,'OBKoro1')
	  this.$set(this.obj,a,'OBKoro1')

7.Vue Filters过滤器的使用

常见的数据文本的格式化

  <!-- 在双花括号中 -->
  <div>{{ message | DateFormat }}</div> //展示正确时间
  <!-- 在'v-bind'中 -->
  <div v-bind:id="rawId | formatId"></div>
​
  Demo:一个日期过滤器返回yyyy- MM-ddhh:mm:ss的样式
  引入一个提前写好日期格式化的js
  import dayjs from ‘dayjs';
  export default {
     data() {
        return {
                //时间毫秒
                message:18324798324789 
            }
    },
    filters: {
        //传入进行日期格式化
      DateFormat(value) {
        return dayjs(value).format(“YYYY-MM-DD HH:mm:ss")
        } 
    }
  }

8.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 // 默认触发一次
	    }
	  }