千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）

computed和wacth的区别？watch实现原理？watch有几种写法？

computed:

• 是一个计算属性，用于基于依赖的响应式数据进行计算，并返回一个新的值。
•  值会被缓存，只有依赖的数据发生变化时才会重新计算，如果依赖的数据没有发生变化，则会直接返回之前缓存的值。
•  属性的值是一个函数，可以通过在模板中调用这个属性来获取计算后的值。

watch:

• 是一个观察者，用于在数据变化时执行指定的回调函数。
• 可以监听一个或多个数据的变化，一旦监听的数据发生变化，就会执行相应的回调函数。
• 适用于需要在数据变化时执行异步操作或对数据变化作出复杂响应的场景。

computedc 适用于根据依赖的响应式数据进行计算并返回新值的场景，而 wacth适用于监听一个或多个数据的变化来执行复杂的响应逻辑或异步操作的场景。

watch实现的原理：

• watch使用了 Vue 的响应式系统来监听数据变化。
• 当调用 watch方法时，Vue 会在内部使用 object.defineProperty来定义一个被观察的属性，以便在数据发生变化时触发相应的回调函数。
• 在回调函数中，可以访问到新值(newVal)和旧值(oldVal)，并可以执行相应的逻辑。

watch的几种写法：

• 简单写法：

watch: {
  dataToWatch(newValue, oldValue) {
    // 监听的回调函数
  }
}  

• 函数写法：

watch: {
  dataToWatch: {
    handler(newValue, oldValue) {
      // 监听的回调函数
    },
    deep: true, // 是否深度监听
    immediate: false // 是否在组件初始化时立即执行回调函数，默认为 false
  }
}   

• 字符串方法名写法：

watch: {
  'dataToWatch': 'methodName'
}
// 然后在 methods 中定义对应的 methodName 方法，
// methodName 方法将会被用作回调函数，接收两个参数：新值和旧值。