✨Vue3 one piece

六大亮点

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

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

create-vite-app project-name

3. 安装依赖运行项目

Cd project-name
npm install
npm run dev

👏 未完待续。。。