vue3的效率提升方法-新都图禾美页建站

新闻中心

这里有您想知道的互联网营销解决方案

vue3的效率提升方法

这篇文章主要介绍“vue3的效率提升方法”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue3的效率提升方法”文章能帮助大家解决问题。

蓝山网站建设公司创新互联,蓝山网站设计制作，有大型网站制作公司丰富经验。已为蓝山数千家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的蓝山做网站的公司定做！

vue3的效率提升方法

对静态节点的提升

什么是静态节点?

所谓的静态节点就是在 vue 中的写在 template 模板中的标签并且该标签没有使用 v-bind 绑定属性, 在 vue3就认为是 静态节点。（学习视频分享：vuejs教程）


   // 静态节点 没有绑定任何属性
  Hello World // 静态节点 没有绑定任何属性
  {{ text }}

vue3就会在 render 函数中将 静态节点用变量保存下来, 所以该静态节点只会创建一次。

// vue2 的静态节点
render(){
 createVNode("h2", null , "Hello World")
}

// vue3 的静态节点
const h2 = createVNode("h2", null , "Hello World")
render(){
 // 直接使用即可
}

为了证明这一点, 本地创建一个 vue3的项目, 看网络请求

vue3的效率提升方法

静态属性也会被提升


   //container 这是一个静态属性
    {{ text }} // 内容是动态的

container 也会使用变量保存

vue3的效率提升方法

预字符串化

在实际的开发中, template 中实际很大一部分都是静态节点


  
    
      logo

菜单

vue3的编译器遇到大量的连续的静态节点, 会直接将其编译为一个普通的字符创节点

.logo .nav 整个 div 都是静态节点, 如果按照 vue2的处理方式会进行递归创建处理

而在 vue3直接转化为一个字符串, 然后在创建真实 dom是赋值给 innerHTML属性, 就减少了 vue2中的递归创建时间

vue3的效率提升方法

预字符串化的性能提升不紧紧在第一次创建时的提升, 当在 render 函数重新渲染时的提升减少了大量的虚拟节点的对比时间(非常恐怖)

缓存事件处理函数


  点一下

handleClick事件，对比一下 vue2和 vue3的处理方式

// vue2
render(ctx){
    return createVNode("button",{
        onclick: function ($event) {
            console.log('点击了')
        }
    })
}

// vue3
export function render(_ctx, _cache, $props, $setup, $data, $options) {
    return (_openBlock(),
    _createBlock("button", {
        onClick: _cache[1] || (_cache[1] = (...args)=>($options.handleClick && $options.handleClick(...args)))
    }, "点一下"))
}

_cache[1] || (_cache[1] = (...args)=>($options.handleClick && $options.handleClick(...args))) 这段代码就是对事件函数的缓存

Block Tree

vue3在对虚拟节点树对比时也做了优化

vue2在对比新旧节点树时, 并不知道那些节点是静态的, 那些节点是动态的, 因此只能一层一层的比较，这就导致浪费了大量的时间在静态节点对比上

vue3是如何进行对比的, 其实在当在创建节点时有有一个标记记录了该节点的类型

vue3的效率提升方法

这里的 -1其实就是标记该节点的类型, 所以当在 Block Tree时, 根据该标记就能直接跳过对静态节点的对比, 从而达到减少对比的时间。

PatchFlag

PatchFlag是对 Block Tree进一步优化, 在对比单个节点的时, 会对比属性, 内容等等。

vue2在单个节点对比时不知道那些是要对比的所以全部对比一次

vue3就知道那些属性是动态的, 每次更新只对比动态的属性


  
    {{ text }}

l.logo中只有 h2 的内容是动态的所以在创建标虚拟节点时就是做标记

vue3的效率提升方法

这里的1就是标记该内容是动态的, 所以在进行对比时就只对比内容是否变化, 就极大的缩短了对比时间(恐怖如斯)

关于“vue3的效率提升方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。

分享标题：vue3的效率提升方法
标题网址：http://www.xdwzjz.cn/article/jhjgci.html

新闻中心

对静态节点的提升

Hello World

{{ text }}

静态属性也会被提升

预字符串化

logo

缓存事件处理函数

Block Tree

PatchFlag

{{ text }}

其他资讯