Vue3.0工程创建 && setup、ref、reactive函数 && Vue3.0响应式实现原理

# 一、创建Vue3.0工程
    # 1.使用vue-cli创建
    # 官方文档： https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
    # 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
        vue --version
    # 安装或者升级你的@vue/cli
        npm install -g @vue/cli
    # 创建
        vue create vue_test
    # 启动
        cd vue_test
        npm run serve
    # 2.使用vite创建
        # 官方文档： https://v3.cn.vuejs.org/guide/installation.html#vite
        # vite官网：https://vitejs.cn
        # 什么是vite？——新一代前端构建工具
        # 优势如下：
            #. 开发环境中，无需打包操作，可以快速的冷启动
            #. 轻量快速的热重载(HMR)
            #. 真正的按需要编译，不在等待整个应用编译完成
        # 创建工程
            npm init vite-app <project-name>
        # 进工程目录
            cd <project-name>
        # 安装依赖
            npm install
        # 运行
            npm run dev
# 二、常用Composition API
    # 1.官方文档： https://v3.cn.vuejs.org/guide/composition-api-introduction.html
        # 2.重点！！setup()函数：
            # .理解：Vue3.0中一个新的配置项，值为一个函数
            # .setup是所有Composition API（组合API）“表演舞台”
            # .组件中所有用到的：数据、方法等等，均要配置在setup中。
            # .setup函数的两种返回值：
                # 若返回一个对象，则对象中的属性、方法，在模板中均可直接使用。（重点！）
                # 若返回一个渲染函数：则可以自定义渲染内容。（了解就行）
            # .注意点：
                # 尽量不要与Vue2.x配置混用
                    # Vue2.x配置（data、methods、computed...）中可以访问到setup中的属性、方法。
                    # 但setup中不能访问到Vue2.x配置（data、methods、computed...）
                # setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性(后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合)
                # setup执行的时机：在beforeCrete之前执行，this是undefined
                # setup的参数：
                    # props: 值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
                    # context上下文对象：attr(值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs)、slots（收到的插槽内容，相当于this.$slots。具名插槽尽量使用“v-slot:name”去指定插槽名）、emit(分发自定义事件的函数，相当于this.$emit)
        # 3.ref()函数：
            # .作用：定义一个响应式的数据
            # .语法：const xxx = ref(initValue)
                # 创建一个包含响应式数据的引用对象(reference对象，简称ref对象)
                # JS中操作数据：xxx.value
                # 模板中读取数据：不需要.value。直接：<div>{{xxx}}</div>
            # .备注：
                # 接收的数据可以是：基本类型、也可以是对象类型
                # 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的
                # 对象类型的数据：内部“求助”了Vue3.0中的一个新函数——reactive函数
        # 4.reactive()函数：
            # 作用：定义一个对象类型的响应式数据（基本数据类型不要用它，要用ref函数）
            # 语法：const 代理对象 = reactive(源对象)接受一个对象（或数组），返回一个代理对象(Proxy的实例对象，简称Proxy对象)
            # reactive定义的响应式数据是“深层次的”
            # 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。
        # 5.reactive对比ref
            # .从定义数据角度对比：
                # ref用来定义：基本类型数据
                # reactive用来定义：对象（或数组）类型数据
                # 备注：ref也可以用来定义对象(或数组)类型数据，它内部会自动通过reactive转为代理对象
            # .从原理角度对比：
                # ref通过Object.defineProperty()的get()与set()来事项响应式（数据劫持） 
                # reactive通过使用Proxe来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。
            # .从使用角度对比：
                # ref定义的数据：操作数据需要.value，读取数据是模板直接读取不需要.value
                # reactive定义的数据：操作数据与读取数据，均不需要.value
# 三、Vue3.0响应式实现原理
    # 通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、删除等。
    # 通过Reflect(反射)：对源对象中的属性进行操作
    # MDN文档中描述的Proxy与Reflect
    # Proxy: https://developer.mozilla.org/zh_CN/Web/JavaScript/Reference/Global_Objects/Proxy
    # Reflect: https://developer.mozilla.org/zh_CN/Web/JavaScript/Reference/Global_Objects/Reflect
    let person = {
        name: '张三',
        age: 18
    };
    # 1.模拟Vue2中实现响应式（Object.defineProperty）
        
    let p = {}
    Object.defineProperty(p, 'name', {
        configurable: true, // 属性可被删除
        get(){ // 有人读取name时调用
        return person.name;
        },
        set(value){
        console.log('person.name属性发生修改，我要去更新页面！');
        person.name = value;

        }
    });
    Object.defineProperty(p, 'age', {
        configurable: true, // 属性可被删除
        get(){ // 有人读取age时调用
        return person.age;
        },
        set(value){
        console.log('person.age属性发生修改，我要去更新页面！');
        person.age = value;

        }
    });

    # 2.模拟Vue3中实现响应式（window.Proxy）
    const p = new Proxy(person, {
        // 有人读取了p的某个属性时调用
        get(target, propName){
        console.log(`有人读取了p神圣的${propName}属性`);
        return Reflect.get(target,propName);
        },
        // 有人修改p的某个属性、或给p追加新的属性时调用
        set(target,propName,value){
        console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`);
        Reflect.set(target,propName,value);
        },
        // 有人删除p的某个属性时调用
        deleteProperty(target, propName){
        console.log(`有人删除了p身上的${propName}属性，我要去更新页面了！`);
        return Reflect.deleteProperty(target,propName);
        }
    })

    # 3.window.Reflect的用法
    let obj = {a:1,b:2};
    const x1 = Reflect.defineProperty(obj, 'c', { // 增加一个c属性 (和Object.defineProperty功能一样，唯一区别是：这里会返回bool值来确认操作成功还是失败，而不是报异常)
        get(){
        return 3;
        }
    });
    console.log(x1);
    const x2 = Reflect.defineProperty(obj, 'c', {
        get(){
        return 4;
        }
    });
    if (x2){
        console.log('某某某操作成功了！');
    }else{
        console.log('某某某操作失败了！');
    }