Vue系列之6-Vue3

前言

本章主要内容：

• 新功能
• 原理
• vite

Vue3比Vue2有什么优势？（重点）

• 性能更好
• 体积更小
• 更好的TS支持
• 更好的代码组织&逻辑抽离
• 更多新功能

Vue3和Vue2生命周期有什么区别？

Options API声明周期

• beforeDestory => beforeUnmount
• destoryed => unmounted

如何理解Composition API和Options API（重要）

CompositionAPI带来了什么

• 更好的代码组织
• 更好的逻辑复用
• 更好的类型推导

如何选择

• 不建议共用，会引起混乱
• 小型项目、业务逻辑简单，用Options API
• 中大型项目、逻辑复杂，用Composition API

如何理解ref toRef和toRefs

ref

• 生成值类型的响应式数据
• 可用于模板和reactive
• 通过.value修改值

最佳使用方式

• 用reactive做对象的响应式，用ref做值类型的响应式
• setup中返回toRefs(state)，或者toRef(state,'xxx')
• ref的变量命名都用xxxRef
• 合成函数返回响应式对象时，使用toRefs

为何需要ref？

• 返回值类型，会丢失响应式
• 如在setup、computed、合成函数，都有可能返回值类型
• Vue如不定义ref，用户将自造ref，反而混乱

为何需要.value?

• ref是一个对象（不丢失响应式），value存储值
• 通过.value属性的get和set实现响应式
• 用于模板、Reactive时，不需要.value，其他情况都需要

为何需要toRef和toRefs？

• 初衷：不丢失响应式的情况下，把对象数据分解/解构
• 前提：针对的是响应式对象（reative封装的）非普通对象
• 注意：不创造响应式，而是延续响应式

reactive/ref创建响应式，toRef/toRefs延续响应式

Vue3升级了哪些重要功能

• createApp
• emits属性
• 生命周期
• 多事件
• Fragment
• 移除.sync
• 异步组件写法
• 移除filter
• Teleport
• Supense
• Composition API

Composition API 实现逻辑复用

• 抽离逻辑代码到一个函数
• 函数命名约定为 useXxxx 格式（React Hooks也是）
• 在 setup 中引用 useXxxx 函数

Vue3如何实现响应式

• 回顾vue2.x的Object.defineProperty
• 学习Proxy语法
• Vue3如何用Proxy实现响应式

Object.definePropery的缺点：

• 深度监听需要一次性递归
• 无法监听新增属性/删除属性（vue.set Vue.delete)
• 无法原生监听数组，需要特殊处理

Proxy实现响应式

• 基本使用
• Reflect
• 实现响应式

Reflect作用

• 和Proxy能力一一对应
• 规范化、标准化、函数化
• 代替Object上的工具函数（防止Object大而全，会更纯净）

Vue3用Proxy实现响应式

• 深度监听，性能更好
• 可监听新增/删除属性
• 可监听数组变化
• Proxy无法兼容所有浏览器，无法polyfill

watch和watchEffect的区别

• 两者都可监听data属性变化
• watch需要明确监听哪个属性
• watchEffect会根据其中的属性，自动监听其变化

setup中如何获取组件实例

• 在setup和其他composition API中没有this
• 可通过getCurrentInstance获取当前实例
• 若使用Options API可正常获取this

Vue3为什么比Vue2快（重要）

• Proxy响应式
• PatchFlag 静态比较
• hoistStatic 静态提升
• CacheHandler 缓存事件
• SSR优化
• Tree-Shaking优化

PatchFlag

• 编译模板时，动态节点做标记
• 标记，分为不同的类型，如Text、Props
• diff算法时，可以区分静态节点，以及不同类型的动态节点

hoistStatic

• 将静态节点的定义，提升到父作用域，缓存起来
• 多个相邻的静态节点，会被合并起来
• 典型的拿空间换时间的优化策略

SSR优化

• 静态节点输出，绕过Vdom
• 动态节点，还是需要动态渲染

Vite为什么这么快

• 开发环境下使用ES6 Module，无需打包——非常快
• 生产环境使用rollup，并不会快很多
• ES6 Module兼容性目前大部分浏览器都支持，未来几年很可能生产环境也可以使用

Composition API和React Hooks对比

• 前者setup只会被调用一次，而后者函数会被多次调用
• 前者无需useMemo、useCallback，因为setup只调用一次
• 前者无需顾虑调用顺序，而后者需要保证hooks的顺序一致
• 前者reactive和ref比后者useState，要难理解