[vue] watch的用法

watch可以用来检测vue实例上的数据变动

1、基础监测


<script> export default
{
    name:'index',
    data() {
      return {
        demo: '',
        value: ''     
      }
    },
    watch: {
      demo(val) {
          this.value =this.demo
      }
     }
  };
</script>

2、immediate属性
watch 的一个特点是，最初绑定的时候是不会执行的，要等到值改变时才执行监听计算。要使它最初绑定的时候就执行，使用immediate

watch: {
  firstName: {
    handler(newValue, oldValue) {
      this.fullName = newValue + ' ' + this.lastName;
    },
    immediate: true
  }
}

3、deep属性（默认为false）
代表是否深度监听，如一个obj里面的一个元素，如果不加deep则无法监测到obj里面的数据。
obj={'a':'1', 'b':'2'}

watch: {
  obj: {
    handler(newValue, oldValue) {
      console.log(newValue);
    },
    deep: true
  }
}

这样a和b的变化都能监测到.。
但监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。如果要监听obj里的单个变量，可以这样：

watch: {
  'obj.a': {
    handler(newValue, oldValue) {
      console.log(newValue);
    }
  }
}

4、监测路由

watch: {
    changeShowType(value) {
      console.log("-----"+value);
    },
    '$route'(to, from){
      console.log(to);  //to表示去往的界面
      console.log(from); //from表示来自于哪个界面
      if(to.path=="/shop/detail"){
        console.log("test");
      }
    }
  }