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类是动静的

好了， 以上就是我的分享，心愿能对大家有所帮忙，欢送大家在评论区探讨鸭～

心愿小伙伴们点赞 反对一下哦～ ，我会更有能源的 ，晚安！