导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

Options API VS Composition API

• Vue2
  • options API
    • 优点：
      • 低耦合：横向切割清晰，数据全放 data，方法全放 methods
    • 缺点：
      • 逻辑不内聚
        • 一旦 methods 中有上十个、上百个方法，要更改 data 下上百个数据，维护起来就很困难了，得上下滚动页面到处找修改的出处
• Vue3
  • composition API 组合式API（基于函数）
    • 优点：
      • 高内聚低耦合
      • 基于函数：
        • 为什么要基于函数？
          • 因为函数最好抽离、最好抽象、最好组合、还能利用闭包缓存数据、更改 this 等好处
    • 在 setup 中可以提逻辑

把计算逻辑提成一个 composition API

• 就和 vue3 自己提供给我们的各种组合式API函数一样（useStore、useRouter），我们可以封装一个自定义 composition API 放到外边去：

  

• 直接调用传值就可以使用了，setup 中就干净许多了：

  

对比 Vue3 逻辑分明，可维护性高：

Vue3.0 新特性

• 重写双向数据绑定
• VDOM 性能瓶颈
• Fragments
• Tree-Shaking 的支持
• Composition API

重写双向数据绑定

• Vue2
  • 基于 Object.defineProperty() 实现
• Vue3
  • 基于 Proxy 实现

Proxy 的优势

• 可以监听数组变化
• 可以监听动态新增的属性
• 可以监听删除的属性
• 可以监听数组的索引和 length 属性的变化
• 代码更简化

优化 VDOM

在 Vue2 中，每次更新 diff，都是全量对比，Vue3 则只对比带有标记的，这样大大减少了非动态内容的对比消耗

Vue Template Explorer 我们可以通过这个网站看到静态标记

patch flag 优化静态树

<span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
<span>{{msg}}</span>
<span>Hello world!</span>
<span>Hello world! </span>

Vue3 编译后的 VDOM 是这个样子的

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createElementVNode("span", null, "Hello world!"),
    _createElementVNode("span", null, "Hello world!"),
    _createElementVNode("span", null, "Hello world!"),
    _createElementVNode("span", null, "Hello world!"),
    _createElementVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */),
    _createElementVNode("span", null, "Hello world!"),
    _createElementVNode("span", null, "Hello world! ")
  ], 64 /* STABLE_FRAGMENT */))
}

// Check the console for the AST

新增了 patch flag 标记

TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
BALL = -2

我们发现创建动态 dom 元素的时候，Vdom 除了模拟出来了它的基本信息之外，还给它加了一个标记： 1 /* TEXT */

这个标记就叫做 patch flag（补丁标记）

patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。

尽管 JavaScript 做 VDOM 的对比已经非常的快，但是 patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在针对大组件的时候。

Fragment

Vue3 允许我们支持多个根节点

<template>
  <div>12</div>
  <div>23</div>
</template>

同时支持 Render JSX 写法

render() {
    return (
        <>
            {this.visable ? (
                <div>{this.obj.name}</div>
            ) : (
                <div>{this.obj.price}</div>
            )}
            <input v-model={this.val}></input>
            {[1, 2, 3].map((v) => {
               return <div>{v}-----</div>;
            })}
        </>
    );
},

同时新增了 Suspense 、Teleport  和  多 v-model 用法

Tree shaking

简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码

在 Vue2 中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是 Vue 实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到

而 Vue3 源码引入 tree shaking 特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中

就是比如你要用 watch 就是 import {watch} from 'vue' 其他的 computed 没用到就不会给你打包减少体积

Composition API