使用watch监听数据的变化

使用watch来监听数据的变化

---

Vue 中提供了配置项：watch 可以监听数据的变化

• 监听简单数据类型
  • 监听简单数据类型监听的就是其数值的变化
• 监听引用数据类型
  • 如果只是简单的监听引用数据类型,无论其属性如何变化,都不会监听到变化。因为监听的是引用数据类型的地址。
  • 想要监听到引用数据类型中属性的变化，需要进行深度监听

little-demo1：监听简单数据类型

 <div id="app">
      <h1>{{ num }}</h1>
      <button @click="fn">点击++</button>
 </div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            num: 100     
        },
        watch: {
          //监听data中的num
          num(newVal, oldVal) {
            console.log("我变化了", newVal);
          }
        }
    });
</script>

little-demo2 ： 监听引用数据类型

<div id="app">
      <h1>{{ num }}</h1>
      <button @click="fn">点击++</button>
      <br />
      <input type="text" v-model="obj.name" />
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            num: 100,
            obj: {
                name: "zs"
            }
        },
        methods: {
            fn() {
                this.num++;
            }
        },
        watch: {
            //监听data中的num
            num(newVal, oldVal) {
                console.log("我变化了", newVal);
            },
            //监听data中obj的变化
            //   obj(newVal) {
            //     //直接这样监听是监听不到变化的,因为监听的一直都是地址
            //     console.log("我变化了," newVal);
            //   }

            //进行深度监听
            //   obj: {
            //     deep: true,
            //     //使用handler来处理变化
            //     handler(newVal) {
            //       //这个newVal就是监听的对象更新后的值
            //       console.log("我变化了", newVal.name);
            //     }
            //   }

            //也可以简单一点,直接监听对象中的属性(由于属性不符合变量命名规范,所以需要使用引号包裹)
            "obj.name"(newVal) {
                console.log("我变化了", newVal);
            }
        }
    });
</script>