vuewatch用法（vue 的watch）

本篇文章给大家谈谈vuewatch用法，以及vue 的watch对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue中watch的用法
• 2、vue3的监听函数watch基础
• 3、vue之watch篇
• 4、vue3中watch使用及watchEffect对比

vue中watch的用法

watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带局族来性能问题，优化的话可此悉以使用字符串形式监听。

上面那句话是对 watch的一个总的理解

先看第一句： watch没有缓存性，更多的是观察的作用桐扒弊，可以监听某些数据执行回调。

从下图中可以看到，当我第一次输出在input框中输入a的时候，就会被watch监听到数据执行cityName函数

将新的和旧的input框的值打印出来. 

后面关于deep用法，会在后续讲解

参考链接 vue中watch的详细用法 - 阳光小点儿 - 博客园

[img]

vue3的监听函数watch基础

基本调用：watch(被监听的数据，回调函数，配置项)

单个数据监听

多个数据监听

vue3允许使用多个watch进行监听不同的数据

也可使用将所有要监听的数据放在一个数组里进行监听

直接监听一个reactive数据时，强制开启深度监听，并且无法关闭；此时无法在回调函裂友数中获取oldValue，oldValue会展示成和newValue一样

监听reactive数据的一个属性时，不会强制开启深度监听，并且可正常获取oldValue的值段源孝

当reactive数据的一个属性是对象时握稿，监听该对象，需手动设置深度监听，且设置深度监听后无法获取oldValue的值

vue之watch篇

简介 ：虽然计算属性在大多数情况下更合适，但有时也需要悉蔽一个自定义的侦答改听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在span style="color:red"数据变化时执行异步或开销较大的操作时/span，这个方式是最有用的。

注意点 ：span style="color:red"不应该使用箭头函数来定义 watcher 函数睁举州/span

watch中的几个常见属性 :

可以在watch中执行复杂的异步操作等；这些是computed不能胜任的。具体可以参考官网的案例

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

语法 ： vm.$watch( expOrFn, callback, [options] )

vm.$watch ： 返回一个取消观察函数，用来停止触发回调

注意 ：组件选项中的watch中可以随着组件的销毁而销毁，而实例方法的 vm.$watch() ，我们需要手动销毁

vue3中watch使用及watchEffect对比

注意：一、监听reactive定义的响应式数据，此时无法正确获取oldValue，强制开启了深度监视（deep配置无效）

**特殊情况：如果监听的是reactive定义的对象中的某个属性（这个属性依蠢纳然是一个对象），所以deep配置有效

示例：

二、监听多个数据时需要使用数组的形式，获取值也是数组形式

监听单个ref定义的数据

watch(sum,(newval,oldval)={

        //  console.log('sum变了',newval,oldval)

        // })

三、监听reactive定义的一个响应式数据中的某个属性

watch(()=person.age,(nval,oval)={

            console.log('age变化了nval',nval)

            console.log('age变化了oval',oval)

     带腊没   })

四、监听reactive定义的一个响应式局橘数据中的某些属性

watch([()=person.age,()=person.firstname],(nval,oval)={

            console.log('person的age或firstname变化了',nval,oval)

        })

五、如果是使用ref定义的对象，可以监听该对象.value或者开启deep:true

示例：当点击事件触发watchEffect依赖的属性值发生变化时就会执行watchEffect回调

关于vuewatch用法和vue 的watch的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。