Vue.js 中的 computed 和 watch 对比

# 1. 【Vue.js 中的 computed 和 watch 对比】

1. **介绍**
- Vue.js 简介
- Vue.js 是一款流行的前端 JavaScript 框架，用于构建交互性强大的用户界面和单页面应用程序。它采用了 MVVM（Model-View-ViewModel）架构模式，使得数据驱动视图的更新变得更加简单和高效。
- Vue.js 提供了一系列的响应式数据绑定和以组件为核心的开发方式，使得开发者能够更加快速地构建出符合业务需求的前端应用。

- 概述 computed 和 watch
- 在 Vue.js 中，computed 和 watch 都是用来监听数据变化并做出相应处理的重要工具。
- computed 主要用于处理一些基于响应式数据计算所得的属性，而 watch 则用于监听数据的变化并执行相应的回调函数。

# 2. **computed 计算属性**

计算属性是 Vue.js 中一个非常重要的概念，它经常用于在模板中进行数据的计算和转换。下面我们来详细了解 computed 计算属性的特点和使用场景。

- **基本用法**
在 Vue 组件中，我们可以通过 `computed` 定义计算属性，示例如下：

  new Vue({
    data: {
      num1: 10,
      num2: 20
    },
    computed: {
      sum: function() {
        return this.num1 + this.num2;
      }
    }
  });

- **特点**
- **缓存机制**：computed 的计算结果会被缓存，只有相关依赖发生改变时才会重新计算。
- **自动更新**：当依赖发生改变时，computed 属性会自动更新其值。
- **适用场景**

- 对多个数据进行计算得出一个新值的情况。
- 需要实时变化的数据展示，如价格计算、时间格式转换等。

通过以上内容，我们已经对 computed 计算属性有了初步的了解。接下来，我们将深入研究 watch 监听属性的用法和特点。

# 3. **watch 监听属性**

- **watch 的基本用法**:
- 在 Vue 实例创建时，可以通过 `watch` 属性监听数据的变化。
- 通过在 `watch` 对象内新增属性名，可以实现对应数据的监听。

- **watch 的特点**:
- **监听修改**：监视数据的变化并执行相应操作。
- **深度监听**：可以通过设置 `deep: true` 选项来深度监听对象内部值的变化。

- **watch 的适用场景**:
- 当需要在数据变化时执行异步操作或复杂操作时，使用 `watch` 会更加灵活。
- 对于需要深度监听特定对象的内部值变化的场景，`watch` 是更好的选择。

#### 示例代码：

const app = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`数据发生变化：${oldVal} => ${newVal}`);
    }
  }
});

app.message = 'Hello, World!'; // 控制台输出：数据发生变化：Hello, Vue! => Hello, World!

#### watch 使用示例流程图：

graph LR
A[开始] --> B{数据发生变化}
B -- 是 --> C[执行相应操作]
C --> D[结束]
B -- 否 --> E[继续监听]
E --> B

通过上述示例可以看出，`watch` 监听属性可以很方便地实现对数据变化的监听并执行对应操作，适用于需要更灵活的监听需求。

# 4. **computed vs watch**

在 Vue.js 中，我们可以使用 computed 和 watch 来处理数据的监视和更新。两者有着不同的特点和适用场景。

#### 计算属性与监视属性的比较