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

  1 # 一、创建Vue3.0工程
  2     # 1.使用vue-cli创建
  3     # 官方文档： https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
  4     # 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
  5         vue --version
  6     # 安装或者升级你的@vue/cli
  7         npm install -g @vue/cli
  8     # 创建
  9         vue create vue_test
 10     # 启动
 11         cd vue_test
 12         npm run serve
 13     # 2.使用vite创建
 14         # 官方文档： https://v3.cn.vuejs.org/guide/installation.html#vite
 15         # vite官网：https://vitejs.cn
 16         # 什么是vite？——新一代前端构建工具
 17         # 优势如下：
 18             #. 开发环境中，无需打包操作，可以快速的冷启动
 19             #. 轻量快速的热重载(HMR)
 20             #. 真正的按需要编译，不在等待整个应用编译完成
 21         # 创建工程
 22             npm init vite-app <project-name>
 23         # 进工程目录
 24             cd <project-name>
 25         # 安装依赖
 26             npm install
 27         # 运行
 28             npm run dev
 29 # 二、常用Composition API
 30     # 1.官方文档： https://v3.cn.vuejs.org/guide/composition-api-introduction.html
 31         # 2.重点！！setup()函数：
 32             # .理解：Vue3.0中一个新的配置项，值为一个函数
 33             # .setup是所有Composition API（组合API）“表演舞台”
 34             # .组件中所有用到的：数据、方法等等，均要配置在setup中。
 35             # .setup函数的两种返回值：
 36                 # 若返回一个对象，则对象中的属性、方法，在模板中均可直接使用。（重点！）
 37                 # 若返回一个渲染函数：则可以自定义渲染内容。（了解就行）
 38             # .注意点：
 39                 # 尽量不要与Vue2.x配置混用
 40                     # Vue2.x配置（data、methods、computed...）中可以访问到setup中的属性、方法。
 41                     # 但setup中不能访问到Vue2.x配置（data、methods、computed...）
 42                 # setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性(后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合)
 43                 # setup执行的时机：在beforeCrete之前执行，this是undefined
 44                 # setup的参数：
 45                     # props: 值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
 46                     # context上下文对象：attr(值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs)、slots（收到的插槽内容，相当于this.$slots。具名插槽尽量使用“v-slot:name”去指定插槽名）、emit(分发自定义事件的函数，相当于this.$emit)
 47         # 3.ref()函数：
 48             # .作用：定义一个响应式的数据
 49             # .语法：const xxx = ref(initValue)
 50                 # 创建一个包含响应式数据的引用对象(reference对象，简称ref对象)
 51                 # JS中操作数据：xxx.value
 52                 # 模板中读取数据：不需要.value。直接：<div>{{xxx}}</div>
 53             # .备注：
 54                 # 接收的数据可以是：基本类型、也可以是对象类型
 55                 # 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的
 56                 # 对象类型的数据：内部“求助”了Vue3.0中的一个新函数——reactive函数
 57         # 4.reactive()函数：
 58             # 作用：定义一个对象类型的响应式数据（基本数据类型不要用它，要用ref函数）
 59             # 语法：const 代理对象 = reactive(源对象)接受一个对象（或数组），返回一个代理对象(Proxy的实例对象，简称Proxy对象)
 60             # reactive定义的响应式数据是“深层次的”
 61             # 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。
 62         # 5.reactive对比ref
 63             # .从定义数据角度对比：
 64                 # ref用来定义：基本类型数据
 65                 # reactive用来定义：对象（或数组）类型数据
 66                 # 备注：ref也可以用来定义对象(或数组)类型数据，它内部会自动通过reactive转为代理对象
 67             # .从原理角度对比：
 68                 # ref通过Object.defineProperty()的get()与set()来事项响应式（数据劫持）
 69                 # reactive通过使用Proxe来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。
 70             # .从使用角度对比：
 71                 # ref定义的数据：操作数据需要.value，读取数据是模板直接读取不需要.value
 72                 # reactive定义的数据：操作数据与读取数据，均不需要.value
 73 # 三、Vue3.0响应式实现原理
 74     # 通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、删除等。
 75     # 通过Reflect(反射)：对源对象中的属性进行操作
 76     # MDN文档中描述的Proxy与Reflect
 77     # Proxy: https://developer.mozilla.org/zh_CN/Web/JavaScript/Reference/Global_Objects/Proxy
 78     # Reflect: https://developer.mozilla.org/zh_CN/Web/JavaScript/Reference/Global_Objects/Reflect
 79     let person = {
 80         name: '张三',
 81         age: 18
 82     };
 83     # 1.模拟Vue2中实现响应式（Object.defineProperty）
 84
 85     let p = {}
 86     Object.defineProperty(p, 'name', {
 87         configurable: true, // 属性可被删除
 88         get(){ // 有人读取name时调用
 89         return person.name;
 90         },
 91         set(value){
 92         console.log('person.name属性发生修改，我要去更新页面！');
 93         person.name = value;
 94
 95         }
 96     });
 97     Object.defineProperty(p, 'age', {
 98         configurable: true, // 属性可被删除
 99         get(){ // 有人读取age时调用
100         return person.age;
101         },
102         set(value){
103         console.log('person.age属性发生修改，我要去更新页面！');
104         person.age = value;
105
106         }
107     });
108
109     # 2.模拟Vue3中实现响应式（window.Proxy）
110     const p = new Proxy(person, {
111         // 有人读取了p的某个属性时调用
112         get(target, propName){
113         console.log(`有人读取了p神圣的${propName}属性`);
114         return Reflect.get(target,propName);
115         },
116         // 有人修改p的某个属性、或给p追加新的属性时调用
117         set(target,propName,value){
118         console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`);
119         Reflect.set(target,propName,value);
120         },
121         // 有人删除p的某个属性时调用
122         deleteProperty(target, propName){
123         console.log(`有人删除了p身上的${propName}属性，我要去更新页面了！`);
124         return Reflect.deleteProperty(target,propName);
125         }
126     })
127
128     # 3.window.Reflect的用法
129     let obj = {a:1,b:2};
130     const x1 = Reflect.defineProperty(obj, 'c', { // 增加一个c属性 (和Object.defineProperty功能一样，唯一区别是：这里会返回bool值来确认操作成功还是失败，而不是报异常)
131         get(){
132         return 3;
133         }
134     });
135     console.log(x1);
136     const x2 = Reflect.defineProperty(obj, 'c', {
137         get(){
138         return 4;
139         }
140     });
141     if (x2){
142         console.log('某某某操作成功了！');
143     }else{
144         console.log('某某某操作失败了！');
145     }