共计 3825 个字符,预计需要花费 10 分钟才能阅读完成。
vue3.0
的各种体现还是十分棒的,相比 vue2.0
的确上了一个台阶,据说在客户端渲染效率比 vue2 晋升了 1.3~2
倍,SSR 渲染效率比 vue2 晋升了 2 ~3
倍。在面试的过程中可能也会被问到。
📌 动态晋升
vue 中有个编译器,在 vue3 的 package.json
文件中有个 @vue/compiler-sfc
,vue2 中叫vue-template-compiler
,这两个就是编译器,它会把咱们的模板编译为render 函数
,在 vue3 中编译器是很智能的,在编译的过程中,它能够发现哪些节点是 动态节点
,什么是动态节点?
动态节点就是一个元素节点,而且这个节点外面没有任何动静的内容,就是说没有绑定任何动静的属性,这叫动态节点,比方:
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
上述代码中的 img
就是动态节点,它没有绑定任何动静的内容
然而 vue3 的编译器会发现动态节点,而后将它进行晋升,然而在 vue2 中它是不在乎是动态节点,还是动静节点,一顿操作猛如虎,上面比照下:
//vue2 的动态节点
render(){
// 创立一个虚构节点 h1,没有任何属性,只有内容为 "法医",编译后 <h1> 法医 </h1>
createVNode("h1",null,"法医");
//.... 其余代码
}
//vue3 的动态节点
const hoisted = createVNode("h1",null,"法医");
function render(){// 间接应用 hoisted 就能够了}
在 vue3 中,它感觉这既然是一个动态节点,那么必定是不会变动的,不可能说这一次是 h1
元素内容是 法医
,下次变成h2
元素内容是别的了,所以说 vue3 认为既然是动态节点,那么就没有必要在 render 函数中进行创立,因为一旦数据扭转,render 函数会重复运行,而后又会从新创立这个动态节点,所以为了晋升效率,在 vue3 中,它会把动态节点进行晋升,晋升到 render 函数里面,这样一来,这个动态节点永远只被创立一次,之后间接在 render 函数中应用就行了。
示例:
运行一个新创建的 vue3 我的项目,在控制台能够分明的看到,动态节点被晋升到内部了。这个就是动态节点的晋升。
其实不仅仅是 动态节点
会进行晋升,而且 动态属性
也是会晋升的,ok,咱们来看下:
示例:
这是 vue3 新创建我的项目中的 APP.vue 组件
,加一条h1
元素节点,要留神 h1 不是动态节点,它是动静的,因为内容是动静的,只有属性是动态的
//APP.vue 代码
<template>
<h1 class="active">{{name}}</h1>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="解决 bug 的法医" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return{name:"bobo"}
},
components: {HelloWorld}
}
</script>
成果如下:
🍒 预字符串化
这一点真的是特地厉害,拜服尤大大
,咱们能够回顾下,在平时 vue 开发过程中,组件当中没有特地多的动静元素,大多都是动态元素。
举个栗子🌰:
<div class="menu-bar-container">
<div class="logo">
<h1> 法医 </h1>
</div>
<ul class="nav">
<li><a href="">menu</a></li>
<li><a href="">menu</a></li>
<li><a href="">menu</a></li>
<li><a href="">menu</a></li>
<li><a href="">menu</a></li>
</ul>
</div>
<div class="user">
<span>{{user.name}}</span>
</div>
在这个组件中,除了 span
元素是动静元素之外,其余都是动态节点,个别能够说是 动静比
,动静内容 / 动态内容,比例越小,动态内容越多,比例越大,动静内容越多,vue3 的编译器它会十分智能地发现这一点, 当编译器遇到大量间断的动态内容,会间接将它编译为一个一般字符串节点
,因为它晓得这些内容永远不会变动,都是动态节点。
💉 留神:必须是大量间断的动态内容才能够预字符串化哦,切记!目前是间断 20 个动态节点才会预字符串化
然而在 vue2 中,每个元素都会变成虚构节点,一大堆的虚构节点😱,这些全都是动态节点,在 vue3 中它会智能地发现这一点
const _hoisted_1 = /*#__PURE__*/
//createStaticVNode 动态节点的意思
_createStaticVNode("<div class=\"menu-bar-container\"><div class=\"logo\"><h1> 法医 </h1></div><ul class=\"nav\"><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li></ul></div>", 1)
瞅个简图,感受一下 vue3 的魅力:
🥥 缓存事件处理函数
举个栗子🌰:
<button @click="count++">plus</button>
比照解决形式:
// vue2 解决形式
render(ctx){
return createVNode("button",{onclick:function($event){ctx.count++;}
})
}
//vue3 解决形式
render(ctx,_cache){
return createVNode("button",{onclick:cache[0] || (cache[0] =>($event) =>(ctx.count++))
})
}
在 vue2 中创立一个虚构节点 button,属性外面多了一个事件 onclick,内容就是 count++
在 vue3 中就有缓存了,它认为这里的事件处理是不会变动的,不是说这次渲染是事件函数,下次就变成别的了,于是 vue3 会智能地发现这一点,会做缓存解决,它首先会看一看缓存外面有没有这个事件函数,有的话间接返回,没有的话就间接赋值为一个 count++ 函数,保障事件处理函数只生成一次,如下图:
🌴 Block Tree
Block Tree
次要为了进步新旧两棵树在比照差别的时候晋升效率,比照差别的过程叫diff 算法
,也叫patch 算法
。
vue2 在比照新旧两棵树的时候,并不知道哪些节点是动态的,哪些节点是动静的,因而只能一层一层比拟,这就节约了大部分工夫在比照动态节点上。
举个栗子🌰:
<form>
<div>
<label> 账号:</label>
<input v-model="user.loginId" />
</div>
<div>
<label> 明码:</label>
<input v-model="user.loginPwd" />
</div>
</form>
vue2 比照:
vue2 通过一系列比照之后发现,,只有 input
产生了变动,也就是 黄色方块
局部,蓝色方块
都为 动态节点
,并没有发生变化,这些没有发生变化的比照都是一些没有意义的比照,节约了工夫,节约了生命
vue3 比照:
vue3 依靠弱小的编译器,编译器能够对每一个节点进行标记,而后在根节点中记录后辈节点中哪些是动静节点,记录之后,在比照的过程中它不是整棵树进行比照,而是间接找到根节点,咱们叫block 节点
,比照动静节点数组就能够了,这样就会略过所有的动态节点,也不波及对树的深度遍历了,所以速度会十分快,当动态内容越多,效率晋升就越大。
当然可能有小伙伴们会问,当数据更新后可能会多进去分支,这样解决的话会造成树的不稳固,树一旦不稳固就会出问题了,但凡树不稳固的中央 vue3 会把它全副变成 块 block
,具体还是挺简单的,我还没钻研呢,大略就是这么个意思。等我想明确了,前面再跟大家说哈😅
🍅 PatchFlag
vue3 感觉在比照每一个节点的时候还是在节约效率,只管说曾经跳过了所有不须要比对的节点,然而它还要看看节点的元素类型、属性以及递归子节点有没有变动,在针对单个节点比照的时候进一步优化,这仍然须要依靠 vue3 弱小的编译器,在编译的时候,它会记录哪个节点是动静内容,并且做上标记
举个栗子🌰:
<div class="active" title="法医">
{{user.name}}
</div>
vue3 会在编译的时候,它会对节点做上标记,图上标记为 1
,示意在div 节点
中text
是 动静
的
举个栗子🌰:
<div :class="active" title="法医">
{{user.name}}
</div>
这个 3
示意在 div 节点
中text
和 class 类
是动静
的
😊 好了,以上就是我的分享,心愿能对大家有所帮忙,欢送大家在评论区探讨鸭~
心愿小伙伴们点赞 👍 反对一下哦~ 😘,我会更有能源的 🤞,晚安!