计算属性computed和watch的区别是什么？

"computed 和 watch 是 Vue.js 框架中常用的两个属性，用于监听数据的变化并执行相应的操作。它们的区别如下：

computed:

1. computed 是一个计算属性，它的值会根据依赖的数据动态计算而来，只有当依赖的数据发生变化时，computed 才会重新计算。computed 的值会被缓存，只有在依赖的数据发生改变时，才会重新计算。

2. computed 可以理解为一个函数，它会根据依赖的数据自动计算并返回一个值。我们可以像访问普通属性一样使用 computed 属性，而不需要在模板中调用函数。

3. computed 可以依赖于多个属性，只要任意一个被依赖的属性发生变化，computed 就会重新计算。computed 的值只有在其依赖的属性发生变化时才会重新计算，否则会直接使用缓存的值。

示例代码如下：

data() {
  return {
    radius: 5,
  };
},
computed: {
  area() {
    return Math.PI * this.radius * this.radius;
  },
},

watch:

1. watch 是一个观察者，它用于监听某个数据的变化，并在数据变化时执行相应的回调函数。watch 监听的数据发生变化时，会立即执行回调函数。

2. watch 可以监听单个数据的变化，也可以监听多个数据的变化。当监听多个数据的变化时，我们可以使用对象的方式来书写。

3. watch 的回调函数接收两个参数，新值和旧值。我们可以根据需要在回调函数中执行相应的操作，比如发送网络请求、执行复杂的计算等。

示例代码如下：

data() {
  return {
    radius: 5,
    area: 0,
  };
},
watch: {
  radius(newVal, oldVal) {
    this.area = Math.PI * newVal * newVal;
  },
},

综上所述，computed 和 watch 在 Vue.js 中的用途和实现方式不同。computed 是一个计算属性，根据依赖的数据动态计算而来，只有在依赖的数据发生变化时才会重新计算；而 watch 是一个观察者，用于监听数据的变化，并在数据变化时执行相应的操作。"