vue之watch监听属性

 

1、组件实例属性watch对应一个对象；键是需要观察的表达式，值是对应回调函数；值也可以是方法名，或者包含选项的对象；组件实例将会在实例化时调用 $watch().

<template>
  <input type="checkbox" v-model="item.checked" @change="handleChange" />
</template>
<script>
export default {
  model: {
    prop: "item", // 自定义属性名
    event: "change" // 自定义事件名
  },
  props: {
    item: { type: Object, default: () => ({ checked: false }) }
  },
  watch: {
    "item.checked"(val, oldVal) {
      // 这里可以在值变化时做些什么
    }
  },
  methods: {
    handleChange(data) {
      this.$emit("change", data);
    }
  }
};
</script>

 

2、立即触发：通过上面的代码，已经可以在值发生变化的时候触发监听，但是如果想在组件初始化时就像触发监听，我们还需要在created或者mounted生命周期钩子里面做事情。不过，现在可以不用这样写了，通过配置watch的立即触发属性，就可以满足需求了。

watch: {
    // 在值发生变化之后，重新加载数据
    "item.checked": {
    // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          // 这里可以在值变化时做些什么
        }
      },
      // 配置立即执行属性
      immediate: true
    }
},

 

3、深度监听：监听对象的每一个值得变化

watch: {
    // 在值发生变化之后，重新加载数据
    item: {
    // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          // 这里可以在值变化时做些什么
        }
      },
      // 配置立即执行属性
      immediate: true,
      // 通过指定deep属性为true, watch会监听对象里面每一个值的变化
      deep: true
    }
  },

 

4、随时监听，随时取消，了解一下$watch

// 随时监听，随时取消，了解一下$watch
const unwatch = this.$watch(
'item',
() => {
    console.log('数据发生了变化')
},
{ deep: true }
);
// 取消简单
unwatch()