vue3.0中的watch和watchEffect的区别和用法

最新推荐文章于 2024-07-07 21:04:06 发布

ratel️

最新推荐文章于 2024-07-07 21:04:06 发布

阅读量663

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/cjy_fly/article/details/125167935

版权

本文探讨了Vue和React中`watch`函数的惰性和非惰性使用，包括如何监听数据变化、嵌套对象和数组，以及`watchEffect`的区别。通过实例演示了两种监听器的执行时机和特性，适合深入理解状态管理的灵活性。

摘要由CSDN通过智能技术生成

watch:

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

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

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

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

setup() { 
	let num = ref(1);
	watch(val,(newValue, oldValue)=>{
		console.log(newValue) // 新的值为 2
		console.log(oldValue) // 旧的值为 1
	})
	setTimeout(() => {
		val.value ++
	}, 1000)
}

监听复杂的嵌套对象 { deep: true }

const state = reactive({
  man: {
    id: 0,
    msg: {
      name: "杰克",
      age: 18,
    },
  },
});
watch(
  () => state.man,
  (newType, oldType) => {
    console.log("新值:", newType, "老值:", oldType);
  },
  { deep: true }
);

监听多个数据

 const man = reactive({ name: "佩奇", age: 20 });
 const year = ref(0)
 watch([() => man.age, year], ([curAge, newVal], [preAge, oldVal]) => {
 console.log("新值:", curAge, "老值:", preAge); console.log("新值:", newVal,
 "老值:", oldVal); });

watchEffect:

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

不需要手动传入依赖

每次初始化时会执行一次回调函数来自动获取依赖

无法获取到原值，只能得到变化后的值

setup() { 
	const obj = reactive({ name: 'hh', count: 1 })
	watchEffect(() => {
		console.log(obj.name) // name为 xx
		console.log(obj.count) // count为 2
	})
	
	setTimeout(() => {
		obj.name = 'xx'
		obj.count ++
	}, 1000)
}