vue 3.0学习

一、vue 3.0 diff算法优化
- 1.vue 3.0六大亮点
- 2.vue 3.0 如何变快的？
- - 1. diff方法优化 https://vue-next-template-explorer.netlify.app
  - - 代码示例 vue3.0 编译模板的优化
    - 附录: PatchFlags
  - 2. hoistStatic静态提升
  - 3. cacheHandlers事件侦听器缓存
  - 4. ssr渲染
  - - 代码示例

一、vue 3.0 diff算法优化

1.vue 3.0六大亮点

Performance:性能比Vue 2. x快1.2 ~2倍
Tree shaking support: 按需编译，体积比Vue2. x更小
Composition API: 组合API (类似React Hooks)
Better TypeScript support: 更好的Ts支持
Custom Renderer API: 暴露了自定义渲染API
Fragment, Teleport (Protal)，Suspense: 更先进的组件

2.vue 3.0 如何变快的？

1. diff方法优化 https://vue-next-template-explorer.netlify.app

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

代码示例 vue3.0 编译模板的优化

vue 3.0编译模板网址

<div>Hello World!</div>
<div>我和我的祖国</div>
<div>{{msg}}</div>
<div :id="uid">{{name}}</div>

export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_createVNode("div", null, "Hello World!"),_createVNode("div", null, "我和我的祖国"),_createVNode("div", null, _toDisplayString(_ctx.msg), 1 /* TEXT */),_createVNode("div", { id: _ctx.uid }, _toDisplayString(_ctx.name), 9 /* TEXT, PROPS */, ["id"])], 64 /* STABLE_FRAGMENT */))
}

注意看第三个_createVNode结尾的“1”： Vue 在运行时会生成number（大于 0）值的PatchFlag，用作标记。

仅带有PatchFlag标记的节点会被真正追踪，且无论层级嵌套多深，它的动态节点都直接与Block根节点绑定，无需再去遍历静态节点

第四个 PatchFlag 变成了9 / TEXT, PROPS /, [“id”]
它会告知我们不光有TEXT变化，还有PROPS变化（id）这样既跳出了virtual
dom性能的瓶颈，又保留了可以手写render的灵活性。等于是：既有react的灵活性，又有基于模板的性能保证。

附录: PatchFlags

export const enum PatchFlags{
TEXT = 1,//动态文本节点
CLASS=1<<1,//2//动态class
STYLE=1<<2,//4//动态style
PROPS=1<<3,//8//动态属性，但不包含类名和样式
FULLPROPS=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, //静态节点
//指示在diff过程应该要退出优化模式
BAIL= -2

2. hoistStatic静态提升

Vue2中无论元素是否参与更新，每次都会重新创建
Vue3中对于不参与更新的元素，只会被创建一次，之后会在每次渲染时候被不停的复用

<div>Hello World!</div>
<div>我和我的祖国</div>
<div>{{msg}}</div>
<div :id="uid">{{name}}</div>

静态提升之前：

 export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_createVNode("div", null, "Hello World!"),_createVNode("div", null, "我和我的祖国"),_createVNode("div", null, _toDisplayString(_ctx.msg), 1 /* TEXT */),_createVNode("div", { id: _ctx.uid }, _toDisplayString(_ctx.name), 9 /* TEXT, PROPS */, ["id"])], 64 /* STABLE_FRAGMENT */))}

静态提升之后：

 const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "Hello World!", -1 /* HOISTED */)const _hoisted_2 = /*#__PURE__*/_createVNode("div", null, "我和我的祖国", -1 /* HOISTED */)export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_hoisted_1, //直接复用_hoisted_2, //直接复用_createVNode("div", null, _toDisplayString(_ctx.msg), 1 /* TEXT */),_createVNode("div", { id: _ctx.uid }, _toDisplayString(_ctx.name), 9 /* TEXT, PROPS */, ["id"])], 64 /* STABLE_FRAGMENT */))}

3. cacheHandlers事件侦听器缓存

默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化
但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可

事件监听缓存
<button @click="inc">按钮</button>

开启事件监听缓存之前：

 export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock("button", { onClick: _ctx.inc }, "按钮", 8 /* PROPS */, ["onClick"]))}

开启事件监听缓存之后：

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

注意点:转换之后的代码，可能还看不懂，但是不要紧
我们只需要观察有没有静态标记即可
因为我们知道在Vue3的diff算法中，只有有静态标记的才会进行比较，才会进行追踪

4. ssr渲染

当有大量静态的内容时候，这些内容会被当做纯字符串推进一个buffer里面，
即使存在动态的绑定，会通过模板插值嵌入进去。这样会比通过虚拟dmo来渲染的快上很多很多。

当静态内容大到一定量级时候，会用_createStaticVNode方法在客户端去生成个static node.
这些静态node,会被直接innerHtml,就不需要创建对象，然后根据对象渲染。

代码示例

 <div>Hello World!</div><div>我和我的祖国</div><div>{{msg}}</div><div :id="uid">{{name}}</div>

开启ssr渲染之前：

 export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_createVNode("div", null, "Hello World!"),_createVNode("div", null, "我和我的祖国"),_createVNode("div", null, _toDisplayString(_ctx.msg), 1 /* TEXT */),_createVNode("div", { id: _ctx.uid }, _toDisplayString(_ctx.name), 9 /* TEXT, PROPS */, ["id"])], 64 /* STABLE_FRAGMENT */))}

开启ssr渲染之后：

 export function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {const _cssVars = _ssrResolveCssVars({ color: _ctx.color })_push(`<!--[--><div${_ssrRenderAttrs(_cssVars)}>Hello World!</div><div${_ssrRenderAttrs(_cssVars)}>我和我的祖国</div><div${_ssrRenderAttrs(_cssVars)}>${_ssrInterpolate(_ctx.msg)}</div><div${_ssrRenderAttrs(_mergeProps({ id: _ctx.uid }, _cssVars))}>${_ssrInterpolate(_ctx.name)}</div><!--]-->`)}

vue 3.0学习1相关推荐

vue.js2.0 新手开发_VueJs2.0建议学习路线
最近VueJs确实火了一把,自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢. 既然大家会看这篇文章,那么 ...
新手入门指导：Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
Vue.js 2.0 学习重点记录
Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...
vue实例没有挂载到html上,vue 源码学习 - 实例挂载
前言在学习vue源码之前需要先了解源码目录设计(了解各个模块的功能)丶Flow语法. src ├── compiler # 把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能. ├── ...
使用 Vue 2.0 实现服务端渲染的 HackerNews
Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...
尤雨溪携手字节前端专家，畅聊 Vue 3.0 前端技术新趋势
前端这个技术领域,在应用化以后,涵盖的内容越来越广--纯表现层.应用实现层.应用架构层.基础设施层到改进开发范式的理念层,都有太多可以去钻研的技术点,衍生出了无数前端开发的发展路线."别更新 ...
jsx怎么往js里传参数_实践Vue 3.0做JSX(TSX)风格的组件开发
作者:莫夭转发链接:https://zhuanlan.zhihu.com/p/102668383 前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React ...
Vue 第九天学习
Vue 第九天学习 1.实现发表评论功能 1.把文本框做双向数据绑定 v-model ="msg" 2.为发表按钮绑定一个事件 @click="post_Comment ...
vue - blog开发学习4
vue - blog开发学习4 1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template><div class="edit ...

vue 3.0学习1