{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"vue3.0","attrs":{}}],"attrs":{}},{"type":"text","text":"的各种表现还是非常棒的，相比","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vue2.0","attrs":{}}],"attrs":{}},{"type":"text","text":"确实上了一个台阶，据说在客户端渲染效率比vue2提升了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"1.3~2","attrs":{}}],"attrs":{}},{"type":"text","text":"倍，SSR渲染效率比vue2提升了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"2 ~3","attrs":{}}],"attrs":{}},{"type":"text","text":"倍。在面试的过程中可能也会被问到。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"📌 静态提升","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue中有个编译器，在vue3的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"package.json","attrs":{}}],"attrs":{}},{"type":"text","text":"文件中有个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"@vue/compiler-sfc","attrs":{}}],"attrs":{}},{"type":"text","text":"，vue2中叫","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vue-template-compiler","attrs":{}}],"attrs":{}},{"type":"text","text":"，这两个就是编译器，它会把我们的模板编译为","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"render函数","attrs":{}}],"attrs":{}},{"type":"text","text":"，在vue3中编译器是很智能的，在编译的过程中，它可以发现哪些节点是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"静态节点","attrs":{}}],"attrs":{}},{"type":"text","text":"，什么是静态节点？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"静态节点就是一个元素节点，而且这个节点里面没有任何动态的内容，就是说没有绑定任何动态的属性，这叫静态节点，比如：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"\n ![\"Vue](https://pic1.xuehuaimg.com/proxy/\"./assets/logo.png\"){kind=logo}
\n 法医
\n createVNode(\"h1\",null,\"法医\");\n //....其他代码\n}\n\n//vue3 的静态节点\nconst hoisted = createVNode(\"h1\",null,\"法医\");\nfunction render(){\n //直接使用 hoisted就可以了\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在vue3中，它觉得这既然是一个静态节点，那么肯定是不会变化的，不可能说这一次是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"h1","attrs":{}}],"attrs":{}},{"type":"text","text":"元素内容是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"法医","attrs":{}}],"attrs":{}},{"type":"text","text":"，下次变成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"h2","attrs":{}}],"attrs":{}},{"type":"text","text":"元素内容是别的了，所以说vue3认为既然是静态节点，那么就没有必要在render函数中进行创建，因为一旦数据改变，render函数会反复运行，然后又会重新创建这个静态节点，所以为了提升效率，在vue3中，它会把静态节点进行提升，提升到render函数外面，这样一来，这个静态节点永远只被创建一次，之后直接在render函数中使用就行了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"示例：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"运行一个新创建的vue3项目，在控制台可以清楚的看到，静态节点被提升到外部了。这个就是静态节点的提升。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/96/961bc34ef8cf715a5c767bbede4ecd24.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实不仅仅是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"静态节点","attrs":{}}],"attrs":{}},{"type":"text","text":"会进行提升，而且","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"静态属性","attrs":{}}],"attrs":{}},{"type":"text","text":"也是会提升的，ok，我们来看下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"示例：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这是vue3新创建项目中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"APP.vue组件","attrs":{}}],"attrs":{}},{"type":"text","text":"，加一条","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"h1","attrs":{}}],"attrs":{}},{"type":"text","text":"元素节点，要注意h1不是静态节点，它是动态的，因为内容是动态的，只有属性是静态的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"//APP.vue代码\n\n{{name}}
\n\n \n {{user.name}}\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在这个组件中，除了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"span","attrs":{}}],"attrs":{}},{"type":"text","text":"元素是动态元素之外，其余都是静态节点，一般可以说是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"动静比","attrs":{}}],"attrs":{}},{"type":"text","text":"，动态内容 / 静态内容，比例越小，静态内容越多，比例越大，动态内容越多，vue3的编译器它会非常智能地发现这一点，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"当编译器遇到大量连续的静态内容，会直接将它编译为一个普通字符串节点","attrs":{}}],"attrs":{}},{"type":"text","text":"，因为它知道这些内容永远不会变化，都是静态节点。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"💉 注意：必须是大量连续的静态内容才可以预字符串化哦，切记！目前是连续20个静态节点才会预字符串化","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而在vue2中，每个元素都会变成虚拟节点，一大堆的虚拟节点😱，这些全都是静态节点，在vue3中它会智能地发现这一点","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"const _hoisted_1 = /*#__PURE__*/\n//createStaticVNode 静态节点的意思\n_createStaticVNode(\"\", 1)\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"瞅个简图，感受一下vue3的魅力：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ea/eaa55521085ca9fa1e560d9734e1d66b.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/22/223642bab7a5660b8738ff43bb89bf6b.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"🥥 缓存事件处理函数","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"举个栗子🌰：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":" \n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"对比处理方式：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"// vue2处理方式\nrender(ctx){\n return createVNode(\"button\",{\n onclick:function($event){\n ctx.count++;\n }\n })\n}\n\n//vue3 处理方式\nrender(ctx,_cache){\n return createVNode(\"button\",{\n onclick:cache[0] || (cache[0] =>($event) =>(ctx.count++))\n })\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在vue2中创建一个虚拟节点button，属性里面多了一个事件onclick，内容就是count++","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在vue3中就有缓存了，它认为这里的事件处理是不会变化的，不是说这次渲染是事件函数，下次就变成别的了，于是vue3会智能地发现这一点，会做缓存处理，它首先会看一看缓存里面有没有这个事件函数，有的话直接返回，没有的话就直接赋值为一个count++函数，保证事件处理函数只生成一次，如下图：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4f/4f8fe407ad97494ef0d62a743fef3006.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"🌴 Block Tree","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Block Tree","attrs":{}}],"attrs":{}},{"type":"text","text":" 主要为了提高新旧两棵树在对比差异的时候提升效率，对比差异的过程叫","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"diff算法","attrs":{}}],"attrs":{}},{"type":"text","text":"，也叫","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"patch算法","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue2在对比新旧两棵树的时候，并不知道哪些节点是静态的，哪些节点是动态的，因此只能一层一层比较，这就浪费了大部分时间在对比静态节点上。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"举个栗子🌰：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"vue2对比：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e5/e5f5f74075de94a573b6e7709be4495c.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue2通过一系列对比之后发现，，只有","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"input","attrs":{}}],"attrs":{}},{"type":"text","text":"发生了变化，也就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"黄色方块","attrs":{}}],"attrs":{}},{"type":"text","text":"部分，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"蓝色方块","attrs":{}}],"attrs":{}},{"type":"text","text":"都为","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"静态节点","attrs":{}}],"attrs":{}},{"type":"text","text":"，并没有发生变化，这些没有发生变化的对比都是一些没有意义的对比，浪费了时间，浪费了生命","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"vue3对比：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/70/707b8a2c803cb4d056cb68585fffd314.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue3依托强大的编译器，编译器可以对每一个节点进行标记，然后在根节点中记录后代节点中哪些是动态节点，记录之后，在对比的过程中它不是整棵树进行对比，而是直接找到根节点，我们叫","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block节点","attrs":{}}],"attrs":{}},{"type":"text","text":"，对比动态节点数组就可以了，这样就会略过所有的静态节点，也不涉及对树的深度遍历了，所以速度会非常快，当静态内容越多，效率提升就越大。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当然可能有小伙伴们会问，当数据更新后可能会多出来分支，这样处理的话会造成树的不稳定，树一旦不稳定就会出问题了，凡是树不稳定的地方vue3会把它全部变成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"块block","attrs":{}}],"attrs":{}},{"type":"text","text":"，具体还是挺复杂的，我还没研究呢，大概就是这么个意思。等我想明白了，后面再跟大家说哈😅","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"🍅 PatchFlag","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue3觉得在对比每一个节点的时候还是在浪费效率，尽管说已经跳过了所有不需要比对的节点，但是它还要看看节点的元素类型、属性以及递归子节点有没有变化，在针对单个节点对比的时候进一步优化，这依然需要依托vue3强大的编译器，在编译的时候，它会记录哪个节点是动态内容，并且做上标记","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/aa/aaca2dfd5807dadb104f71246b6a0ee7.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"举个栗子🌰：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":" \n {{user.name}}\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2e/2e243c3929ff945dc733365cf03bdbd9.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue3会在编译的时候，它会对节点做上标记，图上标记为","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"1","attrs":{}}],"attrs":{}},{"type":"text","text":"，表示在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div节点","attrs":{}}],"attrs":{}},{"type":"text","text":"中","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":"是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"动态","attrs":{}}],"attrs":{}},{"type":"text","text":"的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"举个栗子🌰：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"js"},"content":[{"type":"text","text":"\n {{user.name}}\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/27/273472f45fefda0ca7b53d8cec6f2ebf.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"3","attrs":{}}],"attrs":{}},{"type":"text","text":"表示在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div节点","attrs":{}}],"attrs":{}},{"type":"text","text":"中","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"class类","attrs":{}}],"attrs":{}},{"type":"text","text":"是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"动态","attrs":{}}],"attrs":{}},{"type":"text","text":"的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"😊 好了， 以上就是我的分享，希望能对大家有所帮助，欢迎大家在评论区讨论鸭～","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"希望小伙伴们点赞 👍 支持一下哦～ 😘，我会更有动力的 🤞，晚安！","attrs":{}}]}]}