Vue watch的用法

Vue.js 有一个方法 watch，观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。

1.简单用法

<template>
  <div>
    <a-input v-model="name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zhangsan',
    }
  },
  watch: {
    name(newVal, oldVal) {
      //...
    },
  },
}
</script>

当监听的参数发生变化就会执行函数，也可以在所监听的数据后面直接加字符串形式的方法名：

<template>
  <div>
    <a-input v-model="name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zhangsan',
    }
  },
  watch: {
    name: 'nameChange',
  },
  methods: {
    nameChange() {
      //...
    },
  },
}
</script>

2.初始化执行

上面的用法有个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

<template>
  <div>
    <a-input v-model="name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zhangsan',
    }
  },
  watch: {
    name: {
      handler(newVal, oldVal) {
        // ...
      },
      immediate: true,
    },
  },
}
</script>

3.深度监听

如果需要监听比较复杂数据类型(对象)的变化时，普通的watch方法无法是监听到对象内部属性的变化，只有data中的数据才可以够监听到变化，这时就需要deep属性对对象进行深度的监听。

<template>
  <div>
    <a-input v-model="cat.name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cat: { name: 'mimi', age: 2 },
    }
  },
  watch: {
    cat: {
      handler(val) {
        // ...
      },
      immediate: true,
      deep: true,
    },
  },
}
</script>

设置deep: true 则可以监听到cat.name的变化，此时会给cat的所有属性都加上这个监听器，如果对象属性较多时，则每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：

watch: {
  'cat.name': {
    handler(val) {
      // ...
    },
    immediate: true,
    deep: true,
  },
},

也可以借助于computed计算属性来完成：

<template>
  <div>
    <a-input v-model="cat.name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cat: { name: 'mimi', age: 2 },
    }
  },
  computed: {
    newName() {
      return this.cat.name
    },
  },
  watch: {
    newName(val) {
      //...
    },
  },
}
</script>