watch和computed Vue中两个强大的特性

Vue是一个用于构建用户界面的渐进式框架，它提供了一些强大的特性来实现数据驱动视图和响应式系统。其中两个重要的特性就是watch和computed。

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

那么，watch和computed有什么区别呢？简单来说，watch主要用于观察某个数据的变化，并在变化时执行一些操作；而computed主要用于计算某个数据，并将计算结果缓存起来供视图使用。

具体来说：

watch适合用于处理异步操作或开销较大的操作。例如，在用户输入时发送ajax请求或验证表单等。watch可以接收两个参数：新值和旧值，并根据需要进行比较或处理。

computed适合用于处理同步操作或开销较小的操作。例如，在模板中显示复杂计算后的结果或过滤列表等。computed可以返回一个值，并且只有当依赖数据发生变化时才会重新计算。

watch通常需要在data中定义初始值；而computed不需要在data中定义初始值，因为它本身就是一个函数。

watch可以监听多个数据，并且可以监听深层次的属性变化；而computed只能监听单个数据，并且不能监听深层次的属性变化。

watch通常不会改变依赖数据本身；而computed可能会改变依赖数据本身（如果使用setter方法）。

下面给出一个简单的例子来说明watch和computed的区别：

<template>
  <div>
    <p>输入姓名：</p>
    <input v-model="name" />
    <p>输入年龄：</p>
    <input v-model.number="age" />
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <p>是否成年：{{ isAdult }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: 0,
    };
  },
  computed: {
    // 计算是否成年
    isAdult() {
      return this.age >= 18;
    },
  },
  watch: {
    // 监听姓名变化
    name(newVal, oldVal) {
      console.log(`姓名从${oldVal}变成了${newVal}`);
      // 假设发送ajax请求
      // axios.post("/api/user", { name: newVal });
    },
  },
};
</script>

在这个例子中：

• 我们使用了v-model指令来实现双向绑定，即当用户输入时更新data中对应的属性，当data中对应属性更新时更新视图中对应元素。

• 我们使用了computed属性isAdult来计算是否成年，并将结果显示在视图中。注意我们没有在data中定义isAdult属性，因为它是由age属性计算得到的。只有当age属性发生变化时isAdult属性才会重新计算，并且计算结果会被缓存起来，不会每次都重新计算。

• 我们使用了watch属性name来监听姓名的变化，并在变化时执行一些操作。注意我们在data中定义了name属性的初始值，因为它是用户输入的。每当name属性发生变化时，watch函数就会接收新值和旧值，并打印出来。我们也可以在这里做一些异步操作，比如发送ajax请求等。

这就是watch和computed的区别和用法，希望对你有所帮助。