1.set方法调用时，可以触发页面全部重新渲染。

set方法调用时，可以触发页面全部重新渲染。
created(){
  this.$set(this.data); // 初始化数据 触发监听  data是props
},

2.computed计算属性也可以达到监听的效果

computed:{
  testData:function(){
    return //计算好的值
    //这时候计算好的值 就付给了你的变量 在实例中可以this.使用
  }
}
//初始有值的时候 就已经计算了，并且监听数据改变重新计算
//注意 声明的变量的data中不可以重复声明否则报错

3.watch监听

（1）基本用法 页面初始化没有触发

watch: {
  testData(newval){
    console.log(newval)
  }
},

（2）handler方法和immediate属性
如果 父组件向子组件传值时 这时候值并没有发生改变我们却想在初始的时候就触发watch 就需要这个属性了 immediate 默认为false 为true时只初始化可以被监听

watch: {
  testData: {
      handler(newval, old) {
        console.log(newval, old);
      },
      immediate: true
    }
},

（3）deep属性
watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听
语法:用来监听obj

watch: {
    testObj: {
      handler(newval, old) {
        //newval   old
      },
      immediate: true,
      deep: true
    }
  }
//deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

//如果监听obj中的属性 例如obj.a 就可以优化,使用字符串形式监听   这样 vue会一层一层解析，直到遇见a属性，然后给它设置监听函数
 

watch: {
    'obj.a': {
      handler(newval, old) {
        //newval   old
      },
      immediate: true,
      // deep: true
    }
  }

（4）监听路由

watch: {
  '$route'(to,from){
    console.log(to);   //to表示去往的界面
    console.log(from); //from表示来自于哪个界面
    if(to.path=="/路径"){
    	console.log('操作')
    }
  }
}