vue2中的watch与vue3中的watch的区别对比

vue2与vue3watch区别对比

vue3的 watch 需要在 setup 里使用，在使用之前，还需要先导入该组件

watch API 可以侦听一个 getter 函数

这个getter必须返回一个响应式对象

当该响应式对象更新后，会执行对应的回调函数

 

 watch API 可以侦听一个 getter 函数这个getter必须返回一个响应式对象当该响应式对象更新后，会执行对应的回调函数

尝试检查深度嵌套对象或数组中的 property 变化时，仍然需要 deep 选项设置为 true。 vue3 watch和 vue3 watchEffect都能用来监听数据变化，那两者有什么区别

watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

 默认情况下，watch 是惰性的，即只有当被侦听的源发生变化时才执行回调。

watchEffect是立即执行的，在页面加载时会主动执行一次，来收集依赖；而watch是惰性地执行副作用，它不会立即执行，但可以配置 immediate，使其主动触发一次

       参数不同       watchEffect只需要传递一个回调函数，不需要传递侦听的数据，它会在页面加载时主动执行一次，来收集依赖；而watch至少要有两个参数（第三个参数是配置项），第一个参数是侦听的数据，第二个参数是回调函数

结果不同   watchEffect获取不到更改前的值；而watch可以同时获取更改前和更改后的值

共同点

 详情           

vue2侦听器  

观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。

注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

 vue2   watch和 data 、 methods 都在同级配置：

默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器立即被调用，则需要使用immediate选项。

将侦听器变为一个对象handler:

是处理函数immediate:是否立即被调用，默认为false

 

当watch如果监听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项

为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

例如：如果想要监听info.username的值是否发生变化，如果发生变化了，则做一些操作：

使用deep属性，设置为true

只要durations的任何一个属性发生了变化，都会触发这个侦听器

当我们需要侦听一个响应式变量时 我们可以

 当我们需要侦听不同类型的值时可以将多种不同值类型写在一个数组中 当数组中一个值发生变化时就会触发handler函数

 除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。

 

 当你希望停止侦听器时 vm.$watch 返回一个取消观察函数，用来停止触发回调：

 

 详情      API — Vue.js (vuejs.org)