什么二手车网站做最好,如何制作短视频,建设工程网站资质人员查询,滁州建设网站文章目录 一、编译阶段diff算法优化静态提升事件监听缓存SSR优化 二、源码体积三、响应式系统参考文献 一、编译阶段
回顾Vue2#xff0c;我们知道每个组件实例都对应一个 watcher 实例#xff0c;它会在组件渲染的过程中把用到的数据property记录为依赖#xff0c;当依赖发… 文章目录 一、编译阶段diff算法优化静态提升事件监听缓存SSR优化 二、源码体积三、响应式系统参考文献 一、编译阶段
回顾Vue2我们知道每个组件实例都对应一个 watcher 实例它会在组件渲染的过程中把用到的数据property记录为依赖当依赖发生改变触发setter则会通知watcher从而使关联的组件重新渲染 试想一下一个组件结构如下图
templatediv idcontentp classtext静态文本/pp classtext静态文本/pp classtext{{ message }}/pp classtext静态文本/p...p classtext静态文本/p/div
/template可以看到组件内部只有一个动态节点剩余一堆都是静态节点所以这里很多 diff 和遍历其实都是不需要的造成性能浪费
因此Vue3在编译阶段做了进一步优化。主要有如下
diff算法优化静态提升事件监听缓存SSR优化
diff算法优化
vue3在diff算法中相比vue2增加了静态标记
关于这个静态标记其作用是为了会发生变化的地方添加一个flag标记下次发生变化的时候直接找该地方进行比较
下图这里已经标记静态节点的p标签在diff过程中则不会比较把性能进一步提高 关于静态类型枚举如下
export const enum PatchFlags {TEXT 1,// 动态的文本节点CLASS 1 1, // 2 动态的 classSTYLE 1 2, // 4 动态的 stylePROPS 1 3, // 8 动态属性不包括类名和样式FULL_PROPS 1 4, // 16 动态 key当 key 变化时需要完整的 diff 算法做比较HYDRATE_EVENTS 1 5, // 32 表示带有事件监听器的节点STABLE_FRAGMENT 1 6, // 64 一个不会改变子节点顺序的 FragmentKEYED_FRAGMENT 1 7, // 128 带有 key 属性的 FragmentUNKEYED_FRAGMENT 1 8, // 256 子节点没有 key 的 FragmentNEED_PATCH 1 9, // 512DYNAMIC_SLOTS 1 10, // 动态 soltHOISTED -1, // 特殊标志是负整数表示永远不会用作 diffBAIL -2 // 一个特殊的标志指代差异算法
}静态提升
Vue3中对不参与更新的元素会做静态提升只会被创建一次在渲染时直接复用
这样就免去了重复的创建节点大型应用会受益于这个改动免去了重复的创建操作优化了运行时候的内存占用
span你好/spandiv{{ message }}/div没有做静态提升之前
export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_createVNode(span, null, 你好),_createVNode(div, null, _toDisplayString(_ctx.message), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))
}做了静态提升之后
const _hoisted_1 /*#__PURE__*/_createVNode(span, null, 你好, -1 /* HOISTED */)export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_hoisted_1,_createVNode(div, null, _toDisplayString(_ctx.message), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))
}// Check the console for the AST静态内容_hoisted_1被放置在render 函数外每次渲染的时候只要取 _hoisted_1 即可
同时 _hoisted_1 被打上了 PatchFlag 静态标记值为 -1 特殊标志是负整数表示永远不会用于 Diff
事件监听缓存
默认情况下绑定事件行为会被视为动态绑定所以每次都会去追踪它的变化
divbutton click onClick点我/button
/div没开启事件监听器缓存
export const render /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(div, null, [_createVNode(button, { onClick: _ctx.onClick }, 点我, 8 /* PROPS */, [onClick])// PROPS13,// 8 //动态属性但不包含类名和样式]))
})开启事件侦听器缓存后
export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(div, null, [_createVNode(button, {onClick: _cache[1] || (_cache[1] (...args) (_ctx.onClick(...args)))}, 点我)]))
}上述发现开启了缓存后没有了静态标记。也就是说下次diff算法的时候直接使用
SSR优化
当静态内容大到一定量级时候会用createStaticVNode方法在客户端去生成一个static node这些静态node会被直接innerHtml就不需要创建对象然后根据对象渲染
divdivspan你好/span/div... // 很多个静态属性divspan{{ message }}/span/div
/div编译后
import { mergeProps as _mergeProps } from vue
import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from vue/server-rendererexport function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {const _cssVars { style: { color: _ctx.color }}_push(div${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}divspan你好/span...divspan你好/spandivspan${_ssrInterpolate(_ctx.message)}/span/div/div)
}二、源码体积
相比Vue2Vue3整体体积变小了除了移出一些不常用的API再重要的是Tree shanking
任何一个函数如ref、reavtived、computed等仅仅在用到的时候才打包没用到的模块都被摇掉打包的整体体积变小
import { computed, defineComponent, ref } from vue;
export default defineComponent({setup(props, context) {const age ref(18)let state reactive({name: test})const readOnlyAge computed(() age.value) // 19return {age,state,readOnlyAge}}
});三、响应式系统
vue2中采用 defineProperty来劫持整个对象然后进行深度遍历所有属性给每个属性添加getter和setter实现响应式
vue3采用proxy重写了响应式系统因为proxy可以对整个对象进行监听所以不需要深度遍历
可以监听动态属性的添加可以监听到数组的索引和数组length属性可以监听删除属性
关于这两个 API 具体的不同我们下篇文章会进行一个更加详细的介绍
参考文献
https://juejin.cn/post/6903171037211557895
