# 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,要难理解
上次更新: 5/24/2022, 2:39:26 PM