watch的用法

1.watch监听普通数据类型

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

普通用法 只能监听普通数据类型    此方法只能监听普通数据发生变化  并对一些值进行操作

2.深度监听的用法

<div id="app">
  <input type="text" v-model="childrens.name" />
  <input type="text" v-model="lastName" />
</div>

<script>
    export default{
    data: {
      childrens: {
        name: '小强',
        age: 20,
        sex: '男'
      },
      tdArray:["1","2"],
      lastName:"张三"
    },
    watch:{
      childrens:{
        handler:function(val,oldval){
          console.log(val.name)
        },
        deep:true//对象内部的属性监听，也叫深度监听
      },
      'childrens.name':function(val,oldval){
        console.log(val+"aaa")
      },//如果是键路径必须加上引号
      lastName:function(val,oldval){
        console.log(this.lastName)
      }
    },//以V-model绑定数据时使用的数据变化监测
  })
}
</script>
</body>

深度监听可以监听复杂数据类型  数组对象 但是深度监听必须加上deep属性  最主要的三个属性分别是   handler:function(val,oldval) 跟别是该元素的新值和旧值   immediate: true立即监听  deep:true 深度监听

3.watch的强大用法

watch可以监听到只要能通过this.访问的属性 

下面是我使用watch监听了vuex中的变量的值的变化   注意    "$store.state.list"是有引号的

 watch: {
    // 只要通过this.的方式拿到的值都可以使用watch进行监听
    "$store.state.list": {
      deep: true,
      immediate: true,
      handler(val) {
        localStorage.setItem("list", JSON.stringify(val));
      },
    },
  },