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
- //引入computed import {computed} from 'vue'
//创建一个计算属性 let fullName = computed({}）
watch
-
明确：Vue3中的watch只能监视四种数据
-
- ref对象。
-
- 响应式对象（reactive定义的对象）。
-
- 函数返回一个值。
-
- 一个包含上述内容的数组。
-
-
情况一
- 监视ref定义的【基本类型】数据，则默认监视的就是value值。
-
情况二
-
监视reactive定义的【响应式对象】，注意点有：
- 默认开启了深度监视。
- newValue和oldValue都是新值。
-
-
情况三
-
监视reactive定义的【响应式对象】中的某个数据，注意有：
-
- 若该属性值是依然是【响应式对象】，直接编写即可，且默认开启深度监视。
-
- 若该属性值不是【响应式对象】，需要写成函数形式，且默认关闭深度监视。
-
- newValue和oldValue都是新值。
-
-
-
情况四
-
监视ref定义的【对象类型】数据，注意点如下：
-
- 直接写对象，监视的是对象的地址值，若想监视对象内部的数据，要手动开启深度监视。
-
- 写对象.value，监视的是对象内部的数据（响应式对象），深度监视自动开启。
-
-
-
情况五
- 监视上述的多个数据
对比Vue2和Vue3响应式原理
Vue2的响应式
-
核心原理
- ○ 对象: 通过Object.defineProperty对已有属性值的读取、修改进行劫持（监视/拦截）。
- ○ 数组: 通过重写数组的7个变更方法，来实现元素修改的劫持。
-
存在的问题
- ○ 对象中后添加的属性、或删除已有属性, 界面不会自动更新。
- ○ 直接通过下标替换、添加元素, 界面不会自动更新。
Vue3的响应式
-
核心原理：
-
○ 通过Proxy拦截对data任意属性的任意操作, 包括属性值的读写, 属性的添加, 属性的删除等。
-
○ 通过 Reflect动态对代理对象的相应属性进行特定的操作。
-
备注：MDN相关文档
-
自定义hooks
什么是hook？
- 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。
自定义hook的优势
- 复用代码, 让setup中的逻辑更清楚易懂。
props
新的接收方式（配合TS）
生命周期的改变
Vue2
Vue3
● 有两个被更名：
- ○ beforeDestroy改名为 beforeUnmount
- ○ destroyed改名为 unmounted
新的组件
Teleport
- 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
Fragment
- eleport 是一种能够将我们的组件html结构移动到指定位置的技术。
Suspense
- 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
其他
全局API转移到应用对象
- ● app.component()
- ● app.config()
- ● app.directive()
- ● app.mount()
- ● app.unmount()
- ● app.use()
