【九月打卡】第8天 Setup 函数的使用，ref，reactive 响应式引用的用法和原理

课程名称：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 分钟。明天要加倍努力啊。