揭秘 Vue.js 中 watch 的强大功能：从基础到进阶

2023-10-22 05:37:37

好的，请看以下文章：

在 Vue.js 中，watch 是一个非常有用的特性，它允许我们监听数据变化并做出相应的响应。这篇文章将从基础到进阶，带你深入了解 watch 的工作原理、使用技巧和高级应用，帮助你充分掌握这一强大的工具，提升 Vue.js 开发效率。

watch 的基础用法

watch 的基本语法如下：

watch: {
  expression: handler,
  // 或
  expression: {
    handler: ...,
    options: ...
  }
}

其中，expression 是需要监听的数据表达式，handler 是当数据变化时触发的回调函数。回调函数可以是一个普通函数，也可以是一个带有选项的对象。

watch 的最简单用法就是监听一个数据属性的变化：

watch: {
  count: function (newVal, oldVal) {
    console.log(`count changed from ${oldVal} to ${newVal}`)
  }
}

当 count 属性值发生变化时，上面的回调函数就会被触发，并输出 count 属性值的变化情况。

watch 的高级用法

watch 还可以监听更复杂的数据表达式，例如：

watch: {
  '$route.params.id': function (newVal, oldVal) {
    console.log(`route param 'id' changed from ${oldVal} to ${newVal}`)
  }
}

上面的代码监听了路由参数 id 的变化，当路由参数 id 发生变化时，回调函数就会被触发，并输出 id 的变化情况。

watch 还可以监听计算属性的变化：

watch: {
  computedCount: function (newVal, oldVal) {
    console.log(`computedCount changed from ${oldVal} to ${newVal}`)
  }
}

上面的代码监听了计算属性 computedCount 的变化，当 computedCount 属性值发生变化时，回调函数就会被触发，并输出 computedCount 属性值的变化情况。

watch 的选项

watch 还提供了许多选项，可以用来控制回调函数的执行时机和行为。常用的选项包括：

immediate: 如果为 true，则在实例化时立即触发回调函数。
deep: 如果为 true，则监听数据属性的深度变化，而不是仅仅监听顶层属性的变化。
sync: 如果为 true，则在数据变化时立即触发回调函数，而不是在下一轮事件循环中触发。

watch 的高级应用

watch 可以与其他 Vue.js 特性结合使用，实现更强大的功能。例如：

使用 watch 来实现表单验证：

watch: {
  form: {
    handler: function (newVal, oldVal) {
      if (this.validateForm(newVal)) {
        this.submitForm()
      }
    },
    deep: true
  }
}

上面的代码监听了 form 数据属性的变化，当 form 数据属性发生变化时，回调函数就会被触发，并对表单进行验证。如果表单验证通过，则提交表单。

使用 watch 来实现组件间通信：

// 父组件
watch: {
  count: function (newVal, oldVal) {
    this.$emit('count-changed', newVal)
  }
}

// 子组件
props: ['count'],
watch: {
  count: function (newVal, oldVal) {
    console.log(`count changed from ${oldVal} to ${newVal}`)
  }
}