vue3的composition api中watch和watchEffect的使用差异

前言  终于过了项目冲刺阶段,结束脚不沾地的加班生活,开始有时间继续学习,在前面的开发中,也暴露出自己很多问题,正所谓基础不牢,地动山摇,加油学习弥补中,在这一行,保持 持续学习很重要, 可以现在很菜,但不能永远菜!!  加油!! 最近着手深入学习vue3,简单记录下学习中感觉值得记录下来的一些内容

一、watch

       1、 基础使用  

const name = ref('ashley')
const nameObj = reactive({ name: 'ashley1', englishName: 'Ashley2' })

//监听基本类型的值
watch(name, (curVal, preVal) => {
				console.log('curVal,preVal', curVal, preVal)
			});
//监听对象里的值
watch(() => nameObj.name,(curVal, preVal) => {
				console.log('curVal,preVal', curVal, preVal)
			});

2、一个watch可以同时监听多个数据,语法如下:

//同时监听多个数据
watch([() => nameObj.name,() => nameObj.englishName],
([curName,curEnglishName], [preName,preEnglishName]) => {
	console.log('curName,curEnglishName', curName,curEnglishName)
});

3、消除watch的惰性lazy

//消除惰性 添加immediate:true
watch(() => nameObj.name,(curVal, preVal) => {
				console.log('curVal,preVal', curVal, preVal)
			},{ immediate:true });

4、停止监听

//接收watch返回的函数,即可停止监听,如下4000毫秒后停止监听
const stop =  watch(() => nameObj.name,(curVal, preVal) => {
				console.log('curVal,preVal', curVal, preVal)

				setTimeout((()=>{
					stop()
				},4e3))
			},{ immediate:true });

二、watchEffect

 1、 基础使用  

//只接收一个函数
 watchEffect(()=>{
		    console.log(nameObj.name)
	   })	

2、停止监听和watch一致,接收watchEffect的回调即可

const watchEffectStop =  watchEffect(()=>{
		    console.log(nameObj.name)
			setTimeout((()=>{
				watchEffectStop()
				},4e3))
	        })	

三、watch和watchEffect的差异

      1、watchEffect本身就是立即执行的,不需要另外加immediate:true

       2、watchEffect不需要传递要监听的内容，他会自动感知代码依赖,不需要传递很多参数

       3、watchEffect不能获取之前的值

ps:为了直观浏览,代码缩进做了调整,学习过程的简单记录,如有不恰当之处,欢迎交流学习!