computed和watch的用法和区别面试题，示例代码

computed和watch都是Vue.js中常用的属性，用于对数据进行响应式处理。

computed是一个计算属性，它根据一个或多个Vue实例的响应式状态进行计算，返回一个新的响应式状态。当计算属性所依赖的响应式状态发生改变时，它会自动重新计算并更新结果。因此，计算属性的值是惰性求值的，只有在需要时才会重新计算。

下面是一个计算属性的示例代码：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js',
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
};
</script>

在上面的代码中，我们定义了一个计算属性reversedMessage，它基于message属性计算并返回一个新的字符串，这个字符串是message的反转。

watch是一个观察者属性，它监听一个Vue实例的响应式状态的变化，并在响应式状态发生变化时执行一个回调函数。与计算属性不同，watch并不会返回一个新的响应式状态，而是执行一个自定义的操作。

下面是一个watch的示例代码：

<template>
  <div>
    <input v-model="message" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    },
  },
};
</script>

在上面的代码中，我们定义了一个watch，它监听message属性的变化，并在message发生变化时打印出旧值和新值。当我们在input框中输入内容时，message属性的值发生变化，watch会执行回调函数并打印出变化的值。

总的来说，computed和watch都是用于对Vue实例的响应式状态进行处理的属性，但是它们的作用不同。computed是用于对响应式状态进行计算并返回一个新的响应式状态，而watch是用于对响应式状态的变化进行观察并执行自定义的操作。

computed和watch是Vue.js框架中的两个常用的API。

区别：

computed是依赖已有的响应式数据进行计算得到新的值，并缓存计算结果。只有当依赖的响应式数据发生变化时，才会重新计算。而watch是当指定的响应式数据发生变化时，调用回调函数做出响应。

computed一般用于计算、处理响应式数据，并且在模板中被动态地渲染，watch适用于在响应式数据变化时需要执行异步操作或者复杂的操作。

computed是用于计算值，而watch是用于监听值的改变，虽然可以在watch中计算返回新的值，但是相对于computed是比较繁琐的。

用法:

computed：

new Vue({
  el: '#example',
  data: {
    price: 10,
    count: 2
  },
  computed: {
    totalPrice() {
      return this.price * this.count
    }
  }
})

watch

new Vue({
  el: '#example',
  data: {
    price: 10,
    count: 2,
    totalPrice: 20
  },
  watch: {
    price: function(newValue) {
      this.totalPrice = newValue * this.count;
    },
    count: function(newValue) {
      this.totalPrice = this.price * newValue;
    }
  }
})

在 Vue 中，computed 和 watch 都是用来监听值的变化的，但它们之间有一些重要的区别。

1：功能上：computed 是计算属性，用于根据其他属性计算得出一个新值。watch 是监听一个值的变化，然后执行对应的回调。

2：是否调用缓存：computed 中的函数所依赖的属性没有发生变化时，不会调用缓存，而是重新计算。watch 不会缓存，每次值变化时都会重新监听。

3：异步性：computed 支持异步，watch 不支持异步。

4：使用场景上的差异：computed 通常用于监听数据模型的变化，例如路由、数据绑定等。watch 通常用于监听输入框、按钮等事件，以及监听数据模型的变化。

在实际开发中，应该根据具体的需求来选择使用 computed 还是 watch。如果计算属性的值需要根据其他属性计算得出，并且需要响应数据模型的变化，那么可以使用 computed。如果只需要监听一个值的变化，并且不需要响应数据模型的变化，那么可以使用 watch。