【金秋打卡】第7天 Vue3 + Typescript 从0到1开发通用基础组件（3-8~3-10）-原创手记-慕课网

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：
3-8 vue3 响应式对象的新花样
 3-9 vue3 生命周期
 3-10 vue3 watch检测变化

课程讲师：张轩

课程内容：

今天课程学习的主要知识点内容包括：
1、vue3 响应式对象的新花样；
2、vue3 生命周期；
3、vue3 watch检测变化

课程收获：

通过学习老师的视频课程和同学的公开笔记，主要收获如下：
一、vue3 响应式对象的新花样
vue3响应式的高明之处，内部依赖了es6的proxy对象，改变了原来object.defineProPerty的弊端，完美支持数组和对象的修改操作，让$set成为过去时。
简单说就是：vue2不支持新增对象、修改数组；vue3可以。

二、vue3 生命周期
1、针对vue2改变后的生命周期函数
beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

2、新增的生命周期函数（调试用）
onRenderTracked
onRenderTriggered

三、vue3 watch检测变化
副作用，setup()函数只执行一次，中途不重复触发，故需要watch救场。
例子：

// watch([greetings,data],()=>{
//     document.title="updated"+greetings.value+data.count;
// })

watch([greetings,()=>data.count],()=>{
    document.title="updated"+greetings.value+data.count;
})