深入探讨 computed 和 watch 的区别

前端

2024-01-18 01:02:28

Vue.js 中的 computed 和 watch：响应式编程的强大工具

摘要

在构建动态、响应式的 Vue.js 应用程序时，computed 和 watch 是必不可少的工具。本文将深入探讨这两个特性之间的区别，最佳实践以及实用示例，帮助您充分利用它们。

什么是 computed？

computed 是 Vue.js 中的计算属性，用于从其他响应式属性派生值。与普通属性不同，computed 属性是只读的，这意味着您只能获取其值，而不能直接设置。

优点：

自动更新： 当依赖的响应式属性发生变化时，computed 属性会自动重新计算其值，无需手动更新。
提高性能： computed 属性仅在依赖项发生变化时才更新，避免了不必要的重新渲染。
简化代码： 您可以将复杂的计算逻辑封装在 computed 属性中，使代码更简洁、可读性更强。

什么是 watch？

watch 是一个观察器，用于监视响应式属性的变化并执行回调函数。与 computed 属性不同，watch 可以执行副作用操作，如修改 DOM 或触发网络请求。

优点：

副作用支持： watch 允许您在属性变化时执行自定义操作，使其非常适合响应用户交互或处理异步操作。
灵活性： watch 可以监视多个响应式属性，并为每个属性指定不同的回调函数。
处理异步操作： 在 watch 回调函数中使用 async/await 语法可以轻松处理异步操作。

关键区别

特性	computed	watch
类型	计算属性	观察者
目的	计算值	响应变化
只读	是	否
自动更新	是	否
副作用	否	是

最佳实践

使用 computed 来计算不涉及副作用的派生值。
使用 watch 来处理需要执行副作用的任务。
优先使用 computed 来提高性能。
为复杂计算使用 computed，而不是模板中的复杂表达式。
将 watch 用于需要对用户交互或外部事件做出反应的情况。

示例

import Vue from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`)
    }
  }
}