（四）vue3新特性 -生命周期 watch监测

@

目录

• 新的生命周期
• setup中可写的生命周期函数
• 新增调试函数：onRenderTacked 　 onRenderTackered
• watch 侦测
  • 监测响应式对象，在展示值的时候就会出现proxy的对象

新的生命周期

修改了两个名称 ，为了更好的语义化

setup中可写的生命周期函数

运行：

首选需要导入
import { onMounted , onUpdated } from 'vue'
然后在setup中
onMounted( ()=> {
 console.log('onMounted')
})
onUpdated ( ()=> {
 console.log('onUpdated ')
})

新增调试函数：onRenderTacked 　 onRenderTackered

onRenderTackered( (event)=> {
 console.log('onUpdated ')
})

更新的时候会打印事件源

watch 侦测

首先导入watch的对象

第一个参数是响应式对象   第二个是响应执行的方法体
watch(abc, (newValue,oldValue)=>{    
	console.log('已触发更新')
	console.log(newValue);
	console.log(oldValue);
})

监控多个参数
watch([abc,efd], (newValue,oldValue)=>{    
	console.log('已触发更新')
	console.log(newValue);
	console.log(oldValue);
})

监测响应式对象，在展示值的时候就会出现proxy的对象

解决方案
就是在检测是的时候 watch里面的响应式对象要写成 箭头函数

watch([abc,()=> efd.count], (newValue,oldValue)=>{    
	console.log('已触发更新')
	console.log(newValue);
	console.log(oldValue);
})