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