共计 字 • 阅读约
min
六大亮点
- Preformance: 性能比 Vue 2.x 快 1.2~2 倍
- Tree shaking support : 按需编译,体积比 Vue.2.x 更小
- Composition API : 组合 API
- Better Typescript support : 更好的 Ts 支持
- Custom Renderer API : 暴露了自定义渲染 API
- Gragment, Teleport(Protal), Suspense: 更先进的组件
性能得到了提升
1. diff 算法优化
- Vue2 中虚拟 dom 是进行全量的对比
- Vue3 中增加了 静态标记(PatchFlag),再与上次虚拟节点进行对比的时候,只对比带有 patch flag 的节点,并且可以通过 flag 的信息得知当前节点的要对比的具体内容
2. hoistStatic 静态提升
- Vue2 中无论元素是否参与更新,每次都会重新创建
- 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 事件侦听器缓存
- 默认情况加 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 服务端渲染
- 当有大量静态的内容时候,这些内容会被当做纯字符推进一个 buffer 里面,即使存在动态的绑定,会通过模板插值嵌入进去。这样会比通过虚拟 dom 来渲染的快上很多。
- 当静态内容大到一定量级时候,会用_createStaticVNode 方法在 客户端生成一个 static node,这些静态 node,会被 innerHtml,就不需要创建对象,然后更具对象渲染。
vue 在线编译网站
新版 vue3.0 脚手架 --- Vite
什么是 Vite?
Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。
它主要具有以下特点:
- 快速的冷启动
- 即时的模块热更新
- 真正的按需编译
使用 Vite 创建项目
- 先 npm 全局安装 vite 脚手架工具
npm install -g create-vite-app
- 使用 Vite 命令行工具创建 Vue3.0 项目
create-vite-app project-name
- 安装依赖运行项目
Cd project-name
npm install
npm run dev
👏 未完待续。。。
文章更新于: 2021-4-10 13:25:26