【九月打卡】第11天 watch 和 watchEffect 的使用和差异性，生命周期函数的新写法

课程名称：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 分钟。