vue3 watch和watchEffect的使用以及有哪些区别

1.watch侦听器

引入watch

import {
 ref, reactive, watch, toRefs }
     From 'vue'

对基本数据类型进行监听----- watch特性：

1.具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行

2.参数可以拿到当前值和原始值

3.可以侦听多个数据的变化，用一个侦听起承载

SETUP() {
    	const name = ref('leilei')	watch(name, (curVal, prevVal) =>
 {
 	console.LOG(curVal, PRevVal) }
)}
    template: `Name: input v-model="name" />
    `

对引用类型进行监听-----

setup() {
	const nameObj = reactive({
name: 'leilei', englishName: 'bob'}
    ) 监听一个数据	watch(() =>
     nameObj.name, (curVal, prevVal) =>
 {
 	console.log(curVal, prevVal) }
    ) 监听多个数据 	watch([() =>
     nameObj.name, () =>
     nameObj.name], ([curName, curEng], [prevName, curEng]) =>
 {
     	console.log(curName, curEng, '----', prevName, curEng)  setTimeout(() =>
 {
   stop1()  }
, 5000) }
) const {
 name, englishName }
 = toRefs(nameObj)}
    template: `Name: input v-model="name" />
     englishName: input v-model="englishName" />
    `

2.watchEffect

没有过多的参数 只有一个回调函数

1.立即执行，没有惰性，页面的首次加载就会执行。

2.@R_304_2020@内部代码，代码中有依赖 便会执行

3.不需要传递要侦听的内容 会自动感知代码依赖，不需要传递很多参数，只要传递一个回调函数

4.不能获取之前数据的值 只能获取当前值

5.一些=异步的操作放在这里会更加合适

watchEffect(() =>
 {
	console.log(nameObj.name) }
    )

侦听器的取消 watch 取消侦听器用法相同

const stop = watchEffect(() =>
 {
    	console.log(nameObj.name)  setTimeout(() =>
 {
 	stop() }
, 5000)}
    )const stop1 = watch([() =>
     nameObj.name, () =>
     nameObj.name], ([curName, curEng], [prevName, curEng]) =>
 {
     	console.log(curName, curEng, '----', prevName, curEng)  setTimeout(() =>
 {
   stop1()  }
, 5000) }
    )

watch也可以变为非惰性的 立即执行的 添加第三个参数 immediate: true

 watch([() =>
     nameObj.name, () =>
     nameObj.name], ([curName, curEng], [prevName, curEng]) =>
 {
     	console.log(curName, curEng, '----', prevName, curEng)  setTimeout(() =>
 {
   stop1()  }
, 5000) }
, {
 	immediate: true }
    )

以上就是vue3 watch和watchEffect的使用以及有哪些区别的详细内容，更多关于vue3 watch和watchEffect的资料请关注其它相关文章！

• VUE3中watch和watchEffect的用法详解
• vue 3 中watch 和watchEffect 的新用法
• Vue3中watchEffect的用途浅析
• vue3的watch和watchEffect你了解吗

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！