09-数据监听

 1、简单的数据监听

    <div id="app">
        <input type="text" v-model="num">
    </div>

<script>
        new Vue({
            el: '#app',
            data: {
                num: ''
            },
            watch: {
                num(newVal, oldVal) {
                // 监听 num 属性的数据变化
                // 作用 : 只要 num 的值发生变化,这个方法就会被调用
                // 第一个参数 : 新值
                // 第二个参数 : 旧值,之前的值
                    console.log('oldVal:',oldVal)
                    console.log('newVal:',newVal)
                }
            }
        })
</script>

上述运行结果：

 2、带immediate的监听（立即处理 进入页面就触发）

<script>
      new Vue({
        el: "#app",
        data: {
          num: "",
        },
        watch: {
            num: {
            	// 数据发生变化就会调用这个函数  
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true
            }
        },
      });
    </script>

上述运行结果：

 3、deep（深度监听）

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true。

<script>
      new Vue({
        el: "#app",
        data: {
          food: {
            id: 1,
            name: "冰激凌",
          },
        },
        methods: {
          change() {
            this.food.name = "棒棒糖";
          },
        },
        watch: {
          // 第一种方式：监听整个对象，每个属性值的变化都会执行handler
          // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
          food: {
            // 每个属性值发生变化就会调用这个函数
            handler(newVal, oldVal) {
              console.log("oldVal:", oldVal);
              console.log("newVal:", newVal);
            },
            // 立即处理 进入页面就触发
            //immediate: true,
            // 深度监听 属性的变化
            deep: true,
          },
          // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
          // 函数执行后，获取的 newVal 值和 oldVal 值不一样
          //"food.name"(newVal, oldVal) {
          //  console.log("oldVal:", oldVal); // 冰激凌
          //  console.log("newVal:", newVal); // 棒棒糖
          //},
        },
      });
    </script>

如果deep：false，则：

由于整个对象的地址并没有发生变化，所以点击后对象地址未变，从而并未执行watch