watch和computed的区别

**Watch 和 Computed 的区别**

在 Vue.js 中，`watch` 和 `computed` 是两个非常重要的概念，它们分别用于监控数据变化和计算属性。虽然它们看起来很相似，但实际上它们有着不同的用途和实现方式。

### Watch`watch` 是一个用于监控数据变化的方法，它可以在数据发生变化时触发某些操作。例如，用户输入了新值后，需要更新 UI 或执行一些逻辑。

**示例代码**

javascriptexport default {
 data() {
 return {
 name: ''
 }
 },
 methods: {
 handleInput(e) {
 this.name = e.target.value }
 },
 watch: {
 name(newVal, oldVal) {
 console.log(`Name changed from ${oldVal} to ${newVal}`)
 }
 }
}

在这个例子中，我们定义了一个 `name` 数据，并且使用 `watch` 监控它的变化。当用户输入新值时，`watch` 会触发并输出日志。

### Computed`computed` 是一个用于计算属性的方法，它可以根据数据变化而改变。例如，需要计算两个数值之间的差异或总和。

**示例代码**

javascriptexport default {
 data() {
 return {
 num1:10,
 num2:20 }
 },
 computed: {
 sum() {
 return this.num1 + this.num2 },
 diff() {
 return Math.abs(this.num1 - this.num2)
 }
 }
}

在这个例子中，我们定义了两个 `num` 数据，并且使用 `computed` 计算它们之间的和和差异。

### 区别**1. 监控数据变化**

`watch` 是用于监控数据变化的，而 `computed` 则是用于计算属性的。`watch` 会在数据发生变化时触发某些操作，而 `computed` 则会根据数据变化而改变。

**2. 触发方式**

`watch` 的触发方式是通过监听数据的变化来实现的，而 `computed` 则是通过计算属性来实现的。`watch` 会在数据发生变化时触发某些操作，而 `computed` 则会根据数据变化而改变。

**3. 性能**

`watch` 的性能比 `computed` 差，因为它需要监听数据的变化，这个过程比较耗费资源。而 `computed` 则是通过计算属性来实现的，它的性能比 `watch` 好。

### 总结在 Vue.js 中，`watch` 和 `computed` 是两个非常重要的概念，它们分别用于监控数据变化和计算属性。虽然它们看起来很相似，但实际上它们有着不同的用途和实现方式。`watch` 是用于监控数据变化的，而 `computed` 则是用于计算属性的。选择使用哪一个取决于具体需求。

### 参考* [Vue.js 文档 - Watch]( />* [Vue.js 文档 - Computed](