课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节：6-9 watch 和 watchEffect 的使用和差异性（1），6-10 watch 和 watchEffect 的使用和差异性（2），6-11 生命周期函数的新写法
主讲老师：Dell
课程内容：
今天学习的内容包括：watch 和 watchEffect 的使用和差异性，生命周期函数的新写法
watch 侦听器：
1、具有一定的惰性，只有变化时才执行
2、参数可以拿到当前值和原始值。watch(侦听内容, (当前值，原始值）=> {...})
3、watch 侦听的是 getter/effect 函数、ref、响应式对象、或者这些类型的数组
4、若侦听的是 reactive 类型, 变为函数。如 watch( () => nameObj.name, (cur, per) => {...} )
5、侦听多个数据 。如 watch( [() => obj.name, () => obj.age], ([nameCur, ageCur], [namePre, agePre]) => {...} )
watchEffect 侦听器：
1、立即执行，没有惰性 immediate
2、不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
3、不能获取之前数据的值
Vue3 没有 beforeCreate、created 这两个生命周期函数，代替的是在这两个生命周期里执行的代码，可以直接写在 setup 里示例代码：
<script>
// watch 侦听器
// watchEffect 侦听器，偏向于 effect
const app = Vue.createApp({
setup() {
const { reactive, watch, watchEffect, toRefs } = Vue;
const nameObj = reactive({
name: 'dell', englishName: 'lee'
})
// 具备一定的惰性 lazy
// 参数可以拿到原始和当前值
// 可以侦听多个数据的变化，用一个侦听器承载
watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, preEng]) => {
console.log('watch', curName, prevName, '---', curEng, preEng);
}, { immediate: true })
// 立即执行，没有惰性 immediate
// 不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个毁掉函数
// 不能获取之前数据的值
// const stop = watchEffect(() => {
// console.log(nameObj.name);
// console.log(nameObj.englishName);
// setTimeout(() => {
// stop();
// }, 5000)
// })
const { name, englishName } = toRefs(nameObj);
return { name, englishName }
},
template: `
<div>
<div>
Name: <input v-model="name">
</div>
<div>
Name is {{ name }}
</div>
<div>
EnglishName: <input v-model="englishName">
</div>
<div>
EnglishName is {{ englishName }}
</div>
</div>
`,
});
const vm = app.mount('#root');
</script>课程收获：
今天算是把第六章学完了，手记里选取了今天学习的前三个小节，明日小目标：先把 Vue 项目开发配套工具讲解学个一半先。不过之前学的内容也要好好复习。
今日课程学习时间大约花费 19 分钟。