共计 字 • 阅读约 min

v2384b81fb807dc7ba90a06b8e3a54254a_1440w.jpg

六大亮点

  1. Preformance: 性能比 Vue 2.x 快 1.2~2 倍
  2. Tree shaking support : 按需编译,体积比 Vue.2.x 更小
  3. Composition API : 组合 API
  4. Better Typescript support : 更好的 Ts 支持
  5. Custom Renderer API : 暴露了自定义渲染 API
  6. Gragment, Teleport(Protal), Suspense: 更先进的组件

性能得到了提升

1. diff 算法优化

  1. Vue2 中虚拟 dom 是进行全量的对比
  2. Vue3 中增加了 静态标记(PatchFlag),再与上次虚拟节点进行对比的时候,只对比带有 patch flag 的节点,并且可以通过 flag 的信息得知当前节点的要对比的具体内容

2. hoistStatic 静态提升

  1. Vue2 中无论元素是否参与更新,每次都会重新创建
  2. Vue3 中对于比参与更新的元素,只会被创建一次,之后在每次渲染的时候被不停的复用 js
// 没有静态提升
// 这样静态节点虽不参与响应数据的更新,但是在每次数据更新后,依旧会重复创建
// 一定程度上浪费了性能
import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("p", null, "段落"),
    _createVNode("p", null, "段落"),
    _createVNode("p", null, "段落"),
    _createVNode("p", null, _toDisplayString(_ctx.text), 1 /* TEXT */)
  ]))
}

// 静态提升后
// 不参与更新的静态节点会被拿出来
// 每次响应数据更新后,复用第一次的创建
import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "段落", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "段落", -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createVNode("p", null, "段落", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1,
    _hoisted_2,
    _hoisted_3,
    _createVNode("p", null, _toDisplayString(_ctx.text), 1 /* TEXT */)
  ]))
}

3. cacheHandlers 事件侦听器缓存

  1. 默认情况加 onClick 会被是为动态绑定,所以每次都会去追踪他的变化,但是因为是同一函数,所以没必要有追踪变化,直接缓存起来复用
// 开启事件侦听缓存后
// 绑定在按钮上的事件会被缓存起来,响应数据更新后直接使用
import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("button", {
      onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handelClick(...args)))
    }, "按钮")
  ]))
}

4. ssr 服务端渲染

  1. 当有大量静态的内容时候,这些内容会被当做纯字符推进一个 buffer 里面,即使存在动态的绑定,会通过模板插值嵌入进去。这样会比通过虚拟 dom 来渲染的快上很多。
  2. 当静态内容大到一定量级时候,会用_createStaticVNode 方法在 客户端生成一个 static node,这些静态 node,会被 innerHtml,就不需要创建对象,然后更具对象渲染。

vue 在线编译网站

vue-next-template-explorer

新版 vue3.0 脚手架 --- Vite

什么是 Vite?

GitHub:https://github.com/vitejs/vite

Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。

它主要具有以下特点:

  • 快速的冷启动
  • 即时的模块热更新
  • 真正的按需编译

使用 Vite 创建项目

  1. 先 npm 全局安装 vite 脚手架工具

npm install -g create-vite-app

  1. 使用 Vite 命令行工具创建 Vue3.0 项目

create-vite-app project-name

  1. 安装依赖运行项目
Cd project-name
npm install
npm run dev

👏 未完待续。。。



文章更新于: 2021-4-10 13:25:26