watch的深度监听

watch的深度监听

在监听复杂数据类型的时候，不能像之前监听普通数据那样写，我们需要使用深度监听

代码如下：

<el-col :span="24">
    <div v-html="printData.instrumentDetail.complaintDetail"> </div>
</el-col>
export default{
	props:{
		 printData: {
		      type: [Object, String],
		      default: ''	
	    }
	},
  watch: {
  	//监听普通数据的写法
      printData(newName, oldName) {
        console.log(newName, oldName)
      }
  } 
}

最初绑定的时候是不会执行的，要等到改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？

<el-col :span="24">
    <div v-html="printData.instrumentDetail.complaintDetail"> </div>
</el-col>
export default{
	props:{
		 printData: {
		      type: [Object, String],
		      default: ''	
	    }
	},
  watch: {
  	 printData: {
  	  // 表示对象中属性变化的处理函数，这个函数只能叫这个名字
      handler(newName, oldName) {
      	 console.log(newName, oldName)
      },
      
    // 代表在wacth里声明了printData这个方法之后立即先去执行handler方法
      immediate: true,
      deep: true // 表示开启深度监听
    }
  } 
}

原文链接:https://blog.csdn.net/qq_36688143/article/details/81287535