Vue3核心知识
简介
1.性能的提升
打包大小减少41%。
初次渲染快55%, 更新渲染快133%。
内存减少54%。
2.源码的升级
使用Proxy代替defineProperty实现响应式。
重写虚拟DOM的实现和Tree-Shaking。
3.拥抱TypeScript
Vue3可以更好的支持TypeScript。
4.新的特性
Composition API（组合API）
一些新的内置组件
创建工程
基于 vue-cli 创建（不推荐）
基于 vite 创建（推荐）
轻量快速的热重载（HMR），能实现极速的服务启动。
对 TypeScript、JSX、CSS 等支持开箱即用。
真正的按需编译，不再等待整个应用编译完成。
API风格
创建app
创建app：Vue.createApp( )
挂载应用：app.mount( )
定义组件：defineComponent
OptionsAPI 与 CompositionAPI
Options API 的弊端
- 每个功能的：数据、方法、计算属性等，是分散在：data、methods、computed配置中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于代码的维护和复用。
Composition API 的优势
- 可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。
setup
setup
setup是什么
- 是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。
setup的特点
- setup函数返回的对象中的内容，可直接在模板中使用。
- setup中访问this是undefined。
- setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
setup的参数
- props
- context
• attrs • 一个响应式的属性对象，包含传递给组件的非声明属性。这可以用来处理父组件传递的未在组件中声明的属性。 • slots • 一个插槽函数的对象，可以用来访问组件的插槽内容。 • emit • 一个用于触发自定义事件的函数。可以使用它来在组件内部触发事件，并将数据传递给父组件。 • refs • 一个包含了组件内声明的所有ref对象的属性对象。可以通过refs来访问和修改ref对象的值。
setup的返回值
- 对象
• 对象中的：属性、方法等，在模板中均可以直接使用（重点关注）。
- 函数
• 返回一个模板，可以自定义渲染内容，代码如下（用的不多）。
与Options API的关系
- Vue2 的配置（data、methos......）中可以访问到 setup中的属性、方法。
- 但在setup中不能访问到Vue2的配置（data、methos......）。
- 如果与Vue2冲突，则setup优先。
setup语法糖
响应式数据
ref
基本类型
- let name = ref('张三')
对象类型
- let car = ref({ name:'奔驰' ,price:'50W'})
reactive
对象类型
- let car = reactive({ name:'奔驰' ,price:'50W'})
ref 对比 reactive
ref
- ● 用来定义：基本类型数据、对象类型数据。
- ● 若定义对象类型数据，它内部会自动通过reactive实现响应式。
- ● JS中操作数据需要.value，模板中可以直接读取不需要.value。
reactive
- ● 用来定义：对象类型数据。
- ● 无论JS中还是模板中，均不需要.value。
使用原则：
- ● 若需要一个基本类型的响应式数据，必须使用ref。
- ● 若需要一个响应式对象，层级不深，那么使用ref也可以。
- ● 若需要一个响应式对象，且层级较深，要深度跟踪，那么使用reactive。
计算与监视
computed
//引入computedimport {computed} from 'vue'//创建一个计算属性let fullName = computed({}）
watch
明确：Vue3中的watch只能监视四种数据
- 1. ref对象。
- 2. 响应式对象（reactive定义的对象）。
- 3. 函数返回一个值。
- 4. 一个包含上述内容的数组。
情况一
- 监视ref定义的【基本类型】数据，则默认监视的就是value值。
情况二
- 监视reactive定义的【响应式对象】，注意点有：
• 默认开启了深度监视。 • newValue和oldValue都是新值。
情况三
- 监视reactive定义的【响应式对象】中的某个数据，注意有：
• 1. 若该属性值是依然是【响应式对象】，直接编写即可，且默认开启深度监视。 • 2. 若该属性值不是【响应式对象】，需要写成函数形式，且默认关闭深度监视。 • 3. newValue和oldValue都是新值。
情况四
- 监视ref定义的【对象类型】数据，注意点如下：
• 1. 直接写对象，监视的是对象的地址值，若想监视对象内部的数据，要手动开启深度监视。 • 2. 写对象.value，监视的是对象内部的数据（响应式对象），深度监视自动开启。
情况五
- 监视上述的多个数据
对比Vue2和Vue3响应式原理
Vue2的响应式
核心原理
- ○ 对象: 通过Object.defineProperty对已有属性值的读取、修改进行劫持（监视/拦截）。
- ○ 数组: 通过重写数组的7个变更方法，来实现元素修改的劫持。
存在的问题
- ○ 对象中后添加的属性、或删除已有属性, 界面不会自动更新。
- ○ 直接通过下标替换、添加元素, 界面不会自动更新。
Vue3的响应式
核心原理：
- ○ 通过Proxy拦截对data任意属性的任意操作, 包括属性值的读写, 属性的添加, 属性的删除等。
- ○ 通过 Reflect动态对代理对象的相应属性进行特定的操作。
- 备注：MDN相关文档
• Proxy • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy • Reflect • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
自定义hooks
什么是hook？
本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。
自定义hook的优势
复用代码, 让setup中的逻辑更清楚易懂。
props
新的接收方式（配合TS）
生命周期的改变
Vue2
Vue3
