首页 > 其他分享 >Vue3 的效率提升主要表现在哪些方面?

Vue3 的效率提升主要表现在哪些方面?

时间:2024-01-12 18:34:18浏览次数:44  
标签:哪些方面 渲染 静态 效率 编译 Vue2 Vue3 节点

Vue3带来了许多性能优化和效率提升的特性。本文将重点讨论Vue3在静态提升、预字符串化、缓存事件处理函数、Block Tree和PatchFlag方面的改进。我们将通过对比Vue2和Vue3的编译结果来说明这些方面的效率提升。

静态提升

  • 在Vue2中,每次渲染时都会重新创建VNode节点,即使是静态节点也会被重新创建。这会导致一些不必要的性能损耗。
  • 而在Vue3中,引入了静态提升的概念,它会将静态节点在编译阶段提升为常量,避免了重复创建的开销。

对于下面的这些情况静态节点会被提升

  • 元素节点
  • 没有绑定动态内容

下面是一个Vue2和Vue3的编译结果对比示例:

// Vue2的静态节点
render(){
  return createVNode("h1", null, "Hello World")
  // ...
}

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

通过将静态节点提升为常量,Vue3避免了在每次渲染时重新创建静态节点的开销,从而提高了渲染性能。

预字符串化

预字符串化(Pre-stringification)是一种优化技术,用于处理大量静态内容。它可以将静态内容在编译时转换为字符串,以减少运行时的计算和处理。

下面是一个示例,展示了如何使用预字符串化来优化Vue 3的编译结果:

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '静态标题',
      items: [
        { id: 1, name: '静态项1' },
        { id: 2, name: '静态项2' },
        { id: 3, name: '静态项3' }
      ]
    };
  }
};
</script>

在上面的示例中,title 和 items 是静态数据,不会在运行时发生变化。在编译时,Vue 3会将这些静态内容转换为字符串,以减少运行时的计算和处理。

预字符串化的结果如下所示:

const _hoisted_1 = { class: "title" };
const _hoisted_2 = { class: "item" };

return (_ctx) => {
  return (
    _openBlock(),
    _createBlock("div", null, [
      _createVNode("h1", _hoisted_1, _toDisplayString(_ctx.title), 1 /* TEXT */),
      _createVNode("ul", null, [
        (_openBlock(true),
        _createBlock(_Fragment, null, _renderList(_ctx.items, (item) => {
          return (_openBlock(), _createBlock("li", _hoisted_2, _toDisplayString(item.name), 1 /* TEXT */));
        }), 256 /* UNKEYED_FRAGMENT */))
      ])
    ])
  );
};

在编译结果中,我们可以看到 _hoisted_1 和 _hoisted_2 这些变量,它们存储了静态内容的字符串化结果。这样,在运行时只需要直接使用这些变量,而不需要进行额外的计算和处理。

通过预字符串化,Vue 3可以在编译阶段优化静态内容,提高应用的性能和效率。

缓存事件处理函数

在Vue2中,每次渲染时都会重新创建事件处理函数,即使是相同的事件处理逻辑。这会导致一些不必要的性能损耗。而在Vue3中,引入了缓存事件处理函数的概念,它会将事件处理函数在编译阶段缓存起来,避免了重复创建的开销。

下面是一个Vue2和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++))
  })
}

通过缓存事件处理函数,Vue3避免了在每次渲染时重新创建事件处理函数的开销,从而提高了渲染性能。

Block Tree

在Vue2中,模板中的条件渲染和循环渲染会导致大量的VNode节点创建和销毁,这会影响渲染性能。而在Vue3中,引入了Block Tree的概念,它会将条件渲染和循环渲染的内容封装为一个单独的Block,避免了大量的VNode节点创建和销毁。

下面是一个Vue2和Vue3的编译结果对比示例:

// Vue2的条件渲染
render(){
  return this.show ? createVNode("h1", null, "Hello World") : null
  // ...
}

// Vue3的Block Tree
const _block_1 = this.show ? (openBlock(), createBlock("h1", null, "Hello World")) : null
function render(){
  return (_block_1)
}

通过使用Block Tree,Vue3将条件渲染和循环渲染的内容封装为一个单独的Block,避免了大量的VNode节点创建和销毁,从而提高了渲染性能。

另外 在Vue2中,模板编译后会生成一个单一的渲染函数,该函数负责处理整个模板的渲染逻辑。这意味着每次更新时,整个模板都会重新渲染,即使其中只有一小部分内容发生了变化。

而在Vue3中,编译后的模板会被拆分成多个块(blocks),每个块对应一个节点或一组节点。这些块可以被独立地更新和渲染,从而避免了不必要的渲染操作。

下面是一个示例,展示了Vue2和Vue3的编译结果的区别:

// Vue2
function render() {
  with(this) {
    return _c('div', { staticClass: "container" }, [
      _c('h1', { staticClass: "title" }, [_v("Hello, Vue2!")]),
      _c('button', { on: { click: handleClick } }, [_v("Click me")])
    ])
  }
}

// Vue3
function render(_ctx, _cache) {
  return (_cache[0] || (_cache[0] = _createBlock("div", { class: "container" }, [
    _createVNode("h1", { class: "title" }, "Hello, Vue3!"),
    _createVNode("button", { onClick: _cache[1] || (_cache[1] = handleClick) }, "Click me")
  ])))
}

可以看到,Vue3的编译结果中使用了_createBlock_createVNode来创建块和节点。这些块和节点可以被缓存起来,只有在需要更新时才会重新渲染。Vue3能够更精确地追踪和更新变化的部分,从而提高了渲染性能。当组件的状态发生变化时,只有受影响的块和节点会被重新渲染,而不是整个模板。

总结起来,Vue3的Block Tree在编译结果上与Vue2有所不同,它通过拆分模板为多个块和节点,实现了更细粒度的渲染更新,从而提升了性能和效率。

PatchFlag

在Vue2中,每次渲染时都会对整个VNode进行比较和更新,即使只有部分内容发生了变化。这会导致一些不必要的性能损耗。而在Vue3中,引入了PatchFlag的概念,它会标记VNode中哪些部分发生了变化,从而只对变化的部分进行比较和更新。

下面是一个Vue2和Vue3的编译结果对比示例:

// Vue2的渲染
render(){
  return createVNode("h1", null, this.message)
  // ...
}

// Vue3的PatchFlag
const _hoisted_1 = this.message
function render(){
  return createVNode("h1", null, [_hoisted_1], PatchFlags.TEXT)
}

通过使用PatchFlag,Vue3可以标记VNode中哪些部分发生了变化,从而只对变化的部分进行比较和更新,避免了不必要的性能损耗。

标签:哪些方面,渲染,静态,效率,编译,Vue2,Vue3,节点
From: https://blog.51cto.com/u_11365839/9220332

相关文章

  • RFID技术在汽车装备中的应用:提升安全性与效率
    RFID技术在汽车装备中的应用:提升安全性与效率射频识别(RFID)技术是一种非接触式的自动识别技术,它利用射频信号及其空间耦合和传输特性,实现对目标对象的信息读写。随着汽车工业的不断发展,汽车装备的技术含量越来越高,对于高效、准确的身份识别和物流跟踪的需求也日益凸显。在这种背景下......
  • RFID技术在汽车装备中的应用:提升安全性与效率
    RFID技术在汽车装备中的应用:提升安全性与效率射频识别(RFID)技术是一种非接触式的自动识别技术,它利用射频信号及其空间耦合和传输特性,实现对目标对象的信息读写。随着汽车工业的不断发展,汽车装备的技术含量越来越高,对于高效、准确的身份识别和物流跟踪的需求也日益凸显。在这种背景下......
  • 从0开始使用vue-cli构建Vue3项目
    一、环境检查1、环境是否正常#查询Node版本node-v#查询vue版本npminfovue#查询vue-cli版本vue-V2、如果没有安装vue-cli,可以执行下方命令安装vue-cli最新版本npminstall-g@vue/cli如果是旧版本,可以执行下方命令卸载旧版本,然后再安装新版本的脚手架npmuninstallv......
  • 如何优化 DNS 解析的速度和效率?
    DNS解析是一种安全、快速、稳定、可扩展的DNS服务,为企业和开发者将易于管理识别的域名转换为计算机用于互连通信的数字IP地址,从而将用户的访问路由到相应的网站或应用服务器。DNS解析的主要作用是将域名转换为IP地址,使得用户能够通过域名访问到网站。DNS解析还可以实现负载均衡和......
  • 法律领域AI新突破:Alpha合同审查GPT助力法律效率革新
    随着人工智能的发展,众多律师正在智能化工具的帮助下快速提高自身业务处理能力。Alpha系统新推出的合同审查GPT功能,作为法律界AI应用的新选择,已经在法律实践中展现了效率与智能的双重优势。在日益激烈的市场竞争中,律师需要的不单是速度,更需要确保工作的精确性和质量。Alpha系统的合......
  • 某集成电路中高端测试设备厂商:大幅提升网间文件交换效率
    集成电路中高端测试设备厂商该集成电路测试厂商是一家从事集成电路测试设备研发设计、制造、销售和服务的高科技企业,公司研发的中高端自动化测试设备产品填补了中国集成电路中高端测试设备领域的空白,改变目前完全依赖国外进口的现状同时本着与国外领导企业加强经济合作和技术交流......
  • 使用Nginx部署VUE3+VITE项目时无法访问后端接口的一个情况
    在使用VUE3作为前端,ABPVNEXT6.0作为后端框架。使用Nginx部署后无法访问api,接口报错404找错思路很重要,网上找到了很多Nginx配置信息,但是都不起作用,即使更换服务器重新部署也无法生效后来才发现,ABPNEXT对于未找到对应实体的报错就是404,按照正常的程序逻辑,404应该就是notfound,这一......
  • vue3利用qrcode.vue并通过canvas合并图片
    <template><canvasid="canvas"width="300"height="400"></canvas><el-buttonstyle="margin-top:20px"type="danger"plain@click="downloadCode"......
  • 5分钟搞定vue3函数式弹窗
    前言最近接到一个需求,需要在一些敏感操作进行前要求输入账号和密码,然后将输入的账号和密码加到接口请求的header里面。如果每个页面都去手动导入弹窗组件,在点击按钮后弹出弹窗。再拿到弹窗返回的账号密码后去请求接口也太累了,那么有没有更简单的实现方式呢?函数式弹窗的使用场景......
  • 使用CompletableFuture提升代码执行效率示例
    代码示例/***全国/区域数据统计:*1.新能源规模*2.电网容量*3.输配线路*4.变电站*5.工作场站**@paramareaarea*@paramuseruser*@returntheobject*@since3.0.0*/publicSt......