课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节：6-1 Setup 函数的使用，6-2 ref，reactive 响应式引用的用法和原理（1）
主讲老师：Dell
课程内容：
今天学习的内容包括： Setup 函数的使用，ref，reactive 响应式引用的用法和原理。
Setup 知识要点：
1：为什么要用 setup() 函数，之前老语法在面对比较复杂的组件去开发的时候，数据和方法都是去分开写的，这就导致维护性和可读性差
2：setup() 这个函数，是在 vue 实例完成初始化之前执行的函数，this 指向的是实例化的对象，所以用不了 this
3. 在 vue 实例初始化后，setup() 函数就会被挂在到实例上，可以通过 this.$options.setup() 获取其中的值
ref，reactive 响应式的引用知识要点：
1. 原理：通过 proxy 对数据进行封装，当数据变化时，触发模板等内容的更新。
2. ref处理基本数据类型：proxy，变成 proxy({value:''}) 这样的一个响应式的引用 reactive
3. 处理非基本数据类型：proxy，变成 proxy({name:''}) 这样的一个响应式的引用代码示例：
<script>
// 对数据做校验的插件
const app = Vue.createApp({
template: `
<div @click="handleClick">{{ name }}</div>
`,
methods: {
test() {
console.log(this.$options.setup());
}
},
mounted() {
this.test();
},
// created 实例被完全初始化之前
setup(props, context) {
return {
name: 'dell',
handleClick: () => {
alert(123)
}
}
}
});
const vm = app.mount('#root');
</script>课程收获：
今天开始学习第六章，不过今天只学习了前两节。假期期间学习时间较之前有所减少，但好在学习之心初心未改。从基础语法、组件、动画到高级语法，这门课程不知不觉已经学了三分之一的内容。细节之处要多加思索，更好的理解 Vue 框架。
今日课程学习时间大约花费 9 分钟。明天要加倍努力啊。