vue3笔记----记录自天禹老师的vue2+vue3全套教程（vue3部分）

一、Vue3简介

1、性能的提升

1. 打包大小减少了41%
2. 初次渲染快55%，更新渲染快144%
3. 内存减少54%
   …

2、源码的升级

1. 使用Proxy代替defineProperty实现响应式
2. 重写虚拟DOm的实现和Tree-Shaking
   …

3、Vue3可以更好的支持TypeScript

4、新的特性

1. Composition API（组合API）
   • setup配置
   • ref与reactive
   • watch与watchEffect
   • provide与inject
     …
2. 新的内置组件
   • Fragment
   • Teleport
   • Suspense
3. 其他改变
   • 新的生命周期钩子
   • data选项应始终被声明为一个函数
   • 移除keyCode支持作为v-on的修饰符
     …

二、创建vue3工程

1、使用vue-cli创建

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或升级@vue/cli
npm install -g @vue/cli
## 创建
vue create <project-name>
##启动
cd vue_test
npm run serve

2、使用vite创建

1. 声明是vite？
   vite----新一代前端构建工具
2. 优势
   • 开发环境中，无需打包操作，可快速的冷启动
   • 轻量快速的热重载（HMR）
   • 真正的按需编译，不再等待整个应用编译完成
3. 传统构建与vite构建对比图
   
4. 步骤

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

三、常用Composition API

1、setup

1. setup是Vue3.0中一个新的配置项，值为一个函数
2. setup是所有Composition API（组合API）“ 表演的舞台 ”。
3. 组件中所用到的：数据、方法等等，均要配置在setup中。
4. setup函数中的两种返回值：
   1. 若返回一个对象，则对象中的属性、方法，在模板中均可以直击使用（重点关注）
   2. 若返回一个渲染函数：则可以自定义渲染内容（了解）
5. 注意点：
   1. 尽量不要与vue2 配置混合使用
      ①vue2配置（data、methods、computed。。。）中可以访问到setup中的属性、方法。
      ②但在setup中不能访问到vue2配置
      ③如果有重名，setup有优先
   2. setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个promise实例，但需要suspense和异步组件的配合）

2、ref函数

1. 作用：定义一个响应式的数据
2. 语法：const xxx = ref(initValue)
   1. 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）
   2. js中操作数据：xxx.value
   3. 模板中读取数据：不需要xxx.value，直接<div>{ {xxx}}</div>
3. 备注：
   1. 接收的数据可以是：基本类型、也可以是对象类型
   2. 基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的
   3. 对象类型的数据：内部求助了vue3.0中的一个新函数------reactive函数（下一小节）

3、reactive函数

1. 作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
2. 语法：const 代理对象 = reactive(源对象)接收一个对象（或数组），返回一个代理对象（proxy对象）
3. reactive定义的响应式数据是“深层次的”
4. 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

4、Vue3.0中的响应式原理

1. vue2中的响应式
   1. 实现原理
      ①对象类型：通过Object.defineProperty()对属性的读取，修改进行拦截（数据劫持）
      ②数组类型：通过重写更新数组的一系列方法来实现拦截（对数组的变更方法进行了包裹）

      Object.defineProperty(data,'count',{
             
      	get(){
             },
      	set(){
             }
      })
      

   2. 存在问题：
      ①新增属性、删除属性，界面不会更新
      ②直接通过下标修改数组，界面不会自动更新
2. vue3的响应式
   1. 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等
   2. 通过Reflect（反射）：对源对象的属性进行操作

new Proxy(data,{
   
	//读取属性值
	get(target,prop){
   
		return Reflect.get(target,prop)
	},
	//拦截设置属性值或添加新属性
	set(target,prop,value){
   
		return Reflect.set(target,prop,value)
	},
	//拦截删除属性
	deleteProperty(target,prop){
   
		return Reflect.deleteProperty(target,prop)
	}
})

5、setup的两个注意点

1. setup执行的时机：
   在beforecreate之前执行一次，this是undefined
2. setup的参数
   1. props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
   2. context：上下文对象
      1. attrs：值为对象，包括：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs
      2. slots：收到的插槽内容，相当于this.$slots
      3. emit：分为自定义事件的函数，相当于this.$emit

6、reactive对比ref

1. 从定义数据角度对比：
   1. ref用来定义基本数据类型
   2. reactive用来定义：对象（或数组）类型数据
   3. 备注：ref也可以用来定义对象（或数组）类型的数据，它内部会自动reactive转为代理对象
2. 从原理角度对比：
   1. ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）
   2. reactive通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部数据
3. 从使用角度对比：
   1. ref定义的数据：操作数据需要xxx.value，读取数据时模板中直接读取不需要xxx.value
   2. reactive定义的数据：操作数据与读取数据：均不需要xxx.value