VUE中watch和computed的区别

当使用Vue.js框架时，我们可以用"watch"和"computed"这两个功能来处理数据的变化和衍生数据的计算。

1. Watch（侦听器）：

   • Watch选项允许我们监听指定的数据属性，并在其发生变化时执行自定义的回调函数。
   • 通过在组件中的watch对象中定义属性，可以指定要监听的数据。
   • 当监听的数据发生变化时，watch会自动触发相应的回调函数，从而执行一些逻辑操作。
   • Watch可以是简单的函数，也可以是包含配置选项的对象。配置选项包括handler（回调函数）、deep（深度监听）、immediate（立即执行回调函数）等等。
   • Watch适合处理异步操作、复杂的数据处理逻辑以及需要同时监视多个相关数据的场景。

2. Computed（计算属性）：

   • Computed属性是根据一个或多个已有数据属性计算得出的衍生数据，类似于一个响应式的“虚拟属性”。
   • 在组件中的computed对象中定义计算属性，将其返回值作为新的属性添加到组件实例中。
   • 计算属性具有缓存机制，只有依赖的数据发生变化时，才会重新计算计算属性的值；否则，直接返回上一次计算的结果。
   • 计算属性可以像普通属性一样在模板中使用，无需手动调用或监听。
   • Computed属性适合处理数据的转换、过滤、组合以及需要根据多个相关数据计算得出结果的场景。

总结：
Watch用于监听数据的变化并执行相应操作，适合处理异步操作和复杂逻辑。Computed用于根据现有数据计算衍生数据，并具有缓存机制，适合处理数据的转换和组合。选择使用哪个取决于你的具体需求和场景。

在Vue.js中，watch和computed的实现原理如下：

1. Watch：

   • 当我们在组件选项的watch对象中定义了一个属性时，Vue会在组件实例创建时进行初始化。
   • Vue通过使用Object.defineProperty()方法为该属性添加一个getter和setter。
   • 在getter中，Vue会跟踪这个属性的依赖关系，并将其添加到依赖图中。
   • 当该属性发生变化时，setter被调用，Vue会通知相关的Watcher对象，并触发相应的回调函数。
   • Watcher对象负责管理依赖和执行回调函数。当依赖的数据发生变化时，Watcher会重新计算属性的值或者执行回调函数。

2. Computed：

   • 当我们在组件选项的computed对象中定义一个计算属性时，Vue会在组件实例创建时进行初始化。
   • Vue会使用Object.defineProperty()方法为计算属性添加一个getter函数，但不会添加setter。
   • 在getter函数中，Vue会判断计算属性所依赖的数据是否发生变化。
   • 如果依赖的数据发生变化，则Vue会重新计算计算属性的值。
   • 如果依赖的数据没有发生变化，则Vue直接返回上一次计算的结果，避免不必要的重复计算。
   • Vue还会自动跟踪计算属性与相关数据之间的依赖关系，并在相关数据发生变化时更新计算属性的值。

总结：
Watch通过在数据属性上添加getter和setter来跟踪数据变化并执行回调函数，而Computed通过getter函数和缓存机制来计算衍生数据。Vue使用Object.defineProperty()方法来定义属性的getter和setter，同时也会自动跟踪依赖关系。Watcher对象负责管理依赖和执行回调函数，确保数据的响应式更新。这些机制使得我们能够方便地处理数据的变化和衍生数据的计算。
watch支持异步，computed不支持异步