【vuejs】 computed 和 watch 的区别和使用场景说明

1. 计算属性 computed 概述

计算属性 computed 是 Vue.js 中一个非常强大的功能，它允许开发者声明性地描述一个值是如何根据组件中其他数据计算得来的。计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时，计算属性才会重新计算。这使得计算属性在性能上非常高效，尤其是在需要频繁访问但计算成本较高的情况下。

1.1 computed 的工作原理

计算属性 computed 利用了 Vue 的响应式系统，通过 Object.defineProperty 方法来劫持属性的访问器（getter）和修改器（setter）。当计算属性被访问时，会触发 getter 函数，返回最新的计算结果；当计算属性被赋值时，会触发 setter 函数，允许对原始数据进行操作。

1.2 computed 的特点

• 缓存机制：计算属性具有缓存机制，只有当计算属性的依赖发生变化时，计算属性才会重新计算。这有助于避免不必要的计算，提高性能。
• 响应式依赖：计算属性会跟踪其依赖的数据，当这些数据发生变化时，计算属性会自动更新。
• 不可直接修改：计算属性的值不能直接被修改，它们是只读的。如果需要修改计算属性的值，必须通过修改其依赖的数据来间接实现。

1.3 computed 的使用场景

计算属性适用于以下场景：

• 当需要根据组件中其他数据的组合或变换来派生出新的数据时。
• 当某个值依赖于多个数据源，并且这些数据源可能会频繁变化时。
• 当需要避免在模板或方法中重复编写复杂的表达式时。

计算属性是 Vue 中实现数据响应式和声明式渲染的关键部分，通过合理使用计算属性，可以编写出更加清晰、高效且易于维护的 Vue 应用。

2. 侦听属性 watch 概述

侦听属性 watch 是 Vue.js 中用于观察和响应 Vue 实例中数据变化的一种机制。它允许开发者指定某些数据作为侦听对象，当这些数据发生变化时，可以执行相应的操作。

2.1 watch 的工作原理

侦听属性 watch 通过 Vue 的响应式系统来实现。当指定的数据发生变化时，Vue 会通知 watch 属性，并执行与之关联的回调函数。这使得开发者可以在数据变化时执行异步操作、执行复杂逻辑或触发其他响应。

2.2 watch 的特点

• 数据变化响应：watch 属性可以响应数据的变化，无论是数据的直接修改还是由计算属性触发的间接修改。
• 执行回调函数：当侦听的数据发生变化时，watch 属性会执行预定义的回调函数，允许开发者执行额外的逻辑。
• 支持异步操作：watch 属性的回调函数中可以执行异步操作，例如发起网络请求或处理复杂的异步逻辑。

2.3 watch 的使用场景

侦听属性适用于以下场景：

• 当需要在数据变化时执行异步操作，如从服务器获取数据。
• 当需要在数据变化时执行复杂的业务逻辑，这些逻辑不适合放在计算属性或方法中。
• 当需要在数据变化时触发其他响应，例如路由跳转、状态更新等。
• 当需要在数据变化时进行深层次的对象或数组侦听，watch 属性可以配置 deep 选项来实现深度侦听。

3. computed 和 watch 的区别

3.1 缓存与性能

计算属性 computed 具有内置的缓存机制，这意味着只有当计算属性依赖的响应式数据发生变化时，计算属性才会重新计算。这为应用提供了性能上的优势，特别是在计算成本较高的情况下。相对而言，watch 属性不具备缓存机制，每次被触发时都会执行其回调函数，无论数据是否实际发生变化。

3.2 数据的可变性

computed 属性是只读的，它们不能被直接修改。如果需要改变一个计算属性的值，必须通过修改其依赖的响应式数据来间接实现。而 watch 属性则可以监听数据的变化，并且可以在回调函数中直接修改数据，或者执行其他响应数据变化的操作。

3.3 触发条件

computed 属性的触发条件是其依赖的响应式数据发生变化。Vue.js 通过依赖收集机制来追踪 computed 属性所依赖的数据，一旦这些数据变化，computed 属性就会自动更新。相比之下，watch 属性的触发条件是被监听的数据发生变化，无论这种变化是直接的还是由其他因素间接引起的。

3.4 使用场景

computed 属性适用于那些需要根据现有数据派生新数据，且不需要在数据变化时执行额外操作的场景。例如，根据用户的名字和姓氏派生全名。而 watch 属性适用于需要在数据变化时执行异步操作或复杂业务逻辑的场景，如监听用户输入来请求服务器数据或执行表单验证。

3.5 异步操作

computed 属性不支持异步操作，因为它们是基于响应式系统的同步更新机制。如果需要执行异步操作，如数据的获取或保存，应使用 watch 属性。watch 属性的回调函数可以执行异步操作，并且可以在操作完成后更新视图或数据。

3.6 响应式依赖

computed 属性会创建响应式依赖，这意味着如果 computed 属性依赖的数据发生变化，computed 属性会自动更新。这种机制使得 computed 属性非常适合用于模板渲染和数据展示。而 watch 属性则需要显式地定义其监听的数据，并且可以在数据变化时执行更复杂的逻辑。

3.7 深度监听

watch 属性支持深度监听，这意味着它可以侦听对象或数组内部的变化。通过设置 deep 选项为 true，watch 可以侦听深层次的数据变化，如对象属性的变化或数组元素的增减。而 computed 属性则不支持深度监听，它们只响应直接依赖的响应式数据的变化。

通过以上对比，我们可以看到 computed 和 watch 在 Vue.js 中扮演着不同的角色，它们各自适用于不同的场景和需求。开发者应根据具体的应用场景和性能要求来选择使用 computed 还是 watch。

4. computed 和 watch 的应用场景

4.1 computed 应用场景示例

在电商平台的商品详情页中，商品的总价需要根据商品单价和数量计算得出。使用 computed 属性可以高效地实现这一需求：

• 总价计算：computed 属性可以根据商品单价和数量自动计算总价，当单价或数量发生变化时，总价也会自动更新。

4.2 watch 应用场景示例

在一个表单提交的场景中，需要在用户输入数据后进行验证，并在验证通过后才能提交表单。使用 watch 属性可以监听数据变化并执行验证逻辑：

• 表单验证：watch 属性可以监听表单中的关键字段，如密码强度或必填项，一旦字段值发生变化，watch 属性就会触发并执行验证逻辑，确保数据的有效性。

4.3 computed 和 watch 结合使用场景

在开发一个动态图表展示功能时，图表的数据需要根据用户选择的时间范围动态更新。这里可以结合使用 computed 和 watch 属性：

• 时间范围选择：使用 watch 属性监听用户选择的时间范围，一旦时间范围发生变化，watch 属性触发。
• 图表数据更新：在 watch 的回调函数中，根据新的时间范围计算图表所需的数据，然后更新 computed 属性，该属性负责提供图表组件所需的最新数据。
• 图表组件渲染：图表组件通过绑定 computed 属性来获取数据，并在数据更新时自动重新渲染图表。

5. 结合使用 computed 和 watch 的实例

5.1 实时股票价格更新

在金融应用中，实时股票价格的展示可以通过结合使用 computed 和 watch 属性来实现：

• 价格计算 (computed): 根据股票的买入价和当前市场价计算收益率。
• 价格监听 (watch): 监听股票代码的变化，当用户选择不同的股票时，触发异步请求获取最新价格。

5.2 购物车商品总价计算

在电商平台中，购物车商品的总价计算和更新可以通过 computed 和 watch 实现：

• 总价计算 (computed): 根据购物车中商品的数量和单价，动态计算总价。
• 商品变更监听 (watch): 监听购物车中商品数量或商品单价的变化，更新总价。

5.3 用户输入验证

在用户注册或表单填写的场景中，需要对用户输入进行验证，确保数据的正确性：

• 输入验证 (watch): 监听用户输入字段的变化，如邮箱格式或密码强度。
• 错误提示 (computed): 根据 watch 的结果，计算并展示相应的错误提示信息。

5.4 动态表单生成

在需要根据用户选择动态生成表单的场景中，computed 和 watch 可以协同工作：

• 表单项计算 (computed): 根据用户先前的选择动态计算需要展示的表单项。
• 选择变化监听 (`watch’)：监听用户选择的变化，如选择不同的问题类型，触发表单项的更新。

5.5 权限控制与界面更新

在需要根据用户权限动态展示界面元素的应用中，computed 和 watch 可以提供灵活的控制：

• 权限验证 (computed): 根据用户的角色和权限计算可访问的界面元素。
• 角色变更监听 (`watch’)：监听用户角色的变化，如管理员权限的赋予或撤销，更新界面展示。

通过这些实例，我们可以看到 computed 和 watch 在 Vue.js 应用开发中的多样化用途，它们相互补充，提供了强大的数据响应和用户交互功能。