Vue系列之 watch 有哪些属性，作用是什么

[yuanyuanbyte]

本系列的主题是 Vue，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

watch 有哪些属性，作用是什么

看一个 watch 的例子：

<template>
  <div>
    <div>监听到数组list的长度为：{{listLength}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [1, 1, 1],
      listLength: 0
    };
  },
  watch: {
    // 下面这种默认写法的监听器，初始化时不执行
    list(newValue, oldValue) {
      this.listLength = newValue.length;
    }
  }
};
</script>

上述代码和页面中有一个问题：

我们写了一个监听器，用来监听数组list长度的变化，但是很不幸我们看到页面上所显示的listLength依旧是初始值0。

这是为什么呢?

在我们使用watch即监听器来实现功能的时候，如果不加特别的声明，它表示所监听的对象发生变化之后才会执行，也就是说它一开始不会执行，所以listLength没有变化。

如何解决上述问题呢？

使用另一个写法，即带选项的watch，并且把immediate属性置为true。

小技巧 🍓 ：使用 Vue VSCode Snippets 插件用 vwatch-option，快捷生成的watch 默认就是 true：

watch: {
  list: {
    immediate: true,
    deep: true,
    handler(newValue, oldValue) {

    }
  }
},

介绍一下带选项watch的两个属性:

immediate：

指定 immediate: true 将立即以表达式的当前值触发回调，会立即执行一次。 immediate 立即的

deep：

指定 deep: true ，可以监听对象内部值的变化。

普通监听器是不会监听对象属性变化的，因为消耗很大，当我们需要监听这些属性的时候，就需要使用深度监听。

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。