vue3对于vue2的提升 1,速度提升

vue3的六大亮点

performance:性能比vue2提升1.2~2倍

Tree shaking support:按需编译,体积比vue2更小

composition API:组合API(类似react hooks)

better typeScript suppert:更好的Ts支持

custom renderer API:暴露了自定义渲染API

fragment,teleport(protal),msusoense:更先进的组件

1.优化diff算法

	vue2中的虚拟dom是进行全量的对比  https://vue-next-template-explorer.netlify.app/
	vue3新增了静态标记(patchflag)
		在与上次虚拟节点进行对比的时候,值对比带有patchflag的节点 节省时间 
		并且可以通过flag的信息得知当前节点要对比的具体内容

2.hoistStatic 静态提升

	vue2中五轮元素是否参与更新,每次都会重新创建
	vue3中对于不参与更新的元素,指挥创建一次,之后会在每次渲染的时候被不停的复用

3.cacheHandlers 事件侦听器缓存

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

ssr渲染

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

	<div>
        <p>知道了</p>
        <p>知道了</p>
        <p>知道了</p>
        <p>{{msg}}</p>
    </div>
    //静态提升之前
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.msg), 1 /* TEXT */)
  ]))
}  //这的1 表示的是静态标识符
//静态提升之后  把不改变的放在外层直接复用以前的就行了 不用每次都创建一个元素
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.msg), 1 /* TEXT */)
  ]))
}

//事件监听缓存
	<div>
        <button @click="onclick">按钮</button>
    </div>
//事件监听缓存之前
  export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("button", { onClick: _ctx.onclick }, "按钮", 8 /* PROPS */, ["onClick"]) //这里的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 && _ctx.onclick(...args)))
    }, "按钮")
  ]))
}//这里没有静态标记8  也就是说不再追踪 不回去对比了  性能就提高了
//注意点L转换之后的代码,看看有没有静态标记
//因为vue3的diff算法中,只有有静态标记的才会进行比较,才会进行追踪

附录:patchFlags

export const enum PatchFlags {
TEXT = 1, //动态文本节点
CLASS = 1<< 1,//2 // 动态 class
STYLE = 1 << 2 ,// 4 //动态style
PROPS = 1<<3, // 8 //动态属性,但是不包含类名和样式
PULL_PROPS = 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比较
}