vue中watch监听详解

监听对象具体的某一个属性

watch: {
  'obj.num'(val) {
    console.log('watch' + val)
  }
},

深度监听与立即执行

deep: true开启深度监听，对象属性值变化也能监听到。

immediate: true开启立即执行，即便数据没发生变化，先执行一遍handler函数

<template>
  <div class="home">
    <button @click="drawerData.age++">改变年龄</button>
    <!-- 会触发监听 由此可见无论嵌套多深，均可监听-->
    <button @click="drawerData.mother.age++">改变年龄</button>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      drawerData: {
        name: "yaofeng",
        age: 18,
        mother: {
          name: "lili",
          age: 48,
        },
      },
    };
  },
  watch: {
    drawerData: {
      handler(newVal) {
        console.log("newVal", newVal);
      },
      deep: true,
      immediate: true,
    },
  },
};