Vue 随手笔记

Watch 监听器

实例内配置

watch: {
  isHot: {
    immediate: true, // 初始化调用一下 handler()，默认为 false
    handler(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
  },
}

实例外配置

vm.$watch('isHot', {
  // 实例外，关键字 $watch
  immediate: true, // 初始化调用一下 handler()，默认为 false
  handler(newValue, oldValue) {
    console.log(newValue, oldValue);
  },
});

深度监听

watch: {
  // 实例内
  isHot: {
    immediate: true, // 初始化调用一下 handler()，默认为 false
    handler(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
  },
  // 'numbers.a': {
  //   // 监视多级结构中某个属性的变化（不推荐）
  //   handler(newValue, oldValue) {
  //     console.log(newValue, oldValue);
  //   },
  // },
  numbers: {
    deep: true, // 开启深度监听（vue 提供的 watch 默认不支持检测对象内部值的改变）
    handler(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
  },
}

简写形式

实例内简写

watch: {
  // 不需要设置初始化调用，以及深度监听等
  isHot(newValue, oldValue) {
    console.log(newValue, oldValue);
  },
}

实例外简写

vm.$watch('isHot', function (newValue, oldValue) {
  // 不能使用箭头函数，会影响 this 指向
  console.log(newValue, oldValue);
});

NPM 技巧

查看插件的所有版本号

npm view '名称' versions