watch性能优化：vue watch对象键值说明-immediate属性详解

在angular于vue框架里面，都会有watch，

react无需watch，state有变化(setState)，组件自动更新(componentWillUpdate），React 不监听数据变化。

watch是一个对象，一定要当成对象来用。对象就有键，有值。

• 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。

• 值：

• 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

• 值也可以是函数名：不过这个函数名要用单引号来包裹。

• 值是包括选项的对象：选项包括有三个值

1. handler：其值是一个回调函数。即监听到变化时应该执行的函数。

2. deep：其值是true或false；确认是否深入监听。

   一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。

3. immediate：其值是true或false；确认是否以当前的初始值执行handler的函数——在created之前执行。

   immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法。
   

再来回顾一下vue的生命周期，immediate如果为true,是在beforeCreate 之后，created之前。

watch性能优化

下面有的几个点可以优化vue的性能。

deep: true与Object.freeze()

如果是复杂的对象数据结构，可以把不需要监听的对象，冻结掉

this.$watch()手动注入

比如我们可以手动注入监听器，只有一定条件时，才需要监听，这个也可以大大的提升性能

created() {
  this.debounceEvent = debounce(
    this.demoEvent,
    this.curretnDelay,
  );
  // 只有图表编辑页面，才需要监听
  if (this.$route.name === 'chartDialog') {
    this.$watch('dataOptions', {
      handler() {
        // 只有图表编辑页面，才需要监听
        this.renderData(true);
        console.log('watch dataOptions');
      },
      deep: true,
    });
  }
}

参考文章：

watch的immediate使用 https://blog.csdn.net/MCQq123321/article/details/84100961

转载本站文章《watch性能优化：vue watch对象键值说明-immediate属性详解》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8233.html