【九月打卡】第9天 ref，reactive 响应式引用的用法和原理，toRef 以及 context 参数

课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节：6-3 ref，reactive 响应式引用的用法和原理 （2），6-4 toRef 以及 context 参数（1），6-5 toRef 以及 context 参数（2）

主讲老师：Dell

课程内容：

今天学习的内容包括：ref，reactive 响应式引用的用法和原理，toRef 以及 context 参数。

readonly: 使响应式应用只读，不可修改
const copyName = readonly(nameObj)
toRefs: 可以进行解构（reactive 无法进行解构）
//  proxy({ name: 'dell'})  =>  { name: proxy({ value: 'dell'})}
const { name } = toRefs(nameObj)
return { name }

ref：将简单类型的数据变成响应式
reactive：将数组、对象变成响应式
toRefs：将响应式的对象（proxy({ name: 'abc' })），转变成 { name: proxy({ value: 'abc' }) }，这样对 name 进行解构操作，name 也是响应式的。若在其上取不存在的属性，获取的是 undefined
toRef：在对象上取不存在的属性时，找不到的话不会像 toRefs 一下拿到的是 undefined，而是给这个属性一个默认的空值（不推荐使用）

示例代码：
<script>
    // toRef, context
    const app = Vue.createApp({
        methods: {
            handleChange() {
                alert('change');
            }
        },
        template: `<child @change="handleChange">parent</child>`,
    });

    app.component('child', {
        template: '<div @click="handleClick">123123</div>',
        setup(props, context) {
            const { h } = Vue;
            const { attrs, slots, emit } = context;
            function handleClick() { emit('change'); }
            return { handleClick }
        }
    })
    const vm = app.mount('#root');
</script>

课程收获：

今天只学了三个小节，第六章目前学习进度约一半。明天要更加努力。第六章的内容比较难理解，要反复多看才能更好的理解 Vue 框架。

今日课程学习时间大约花费 12 分钟。