vue3이 왜 빠른가요? vue3의 효율성은 주로 어떤 측면에서 향상되나요?

vue3이 왜 빠른가요? vue3의 효율성은 주로 어떤 측면에서 향상됩니까? 다음 기사에서는 vue2와 비교하여 vue3의 최적화를 소개합니다. 도움이 되길 바랍니다!

유다다는 vue3을 소개하면서 클라이언트의 렌더링 효율이 vue2보다 1.3~2배, SSR 렌더링 효율이 vue2보다 2~3배 높다고 했습니다.

정적 노드 개선

정적 노드란 무엇인가요?

정적 노드라고 불리는 것은 vue의 template 템플릿에 작성된 template 模板中的 标签 并且该标签没有使用 v-bind 绑定属性, 在 vue3 就认为是 静态节点。（学习视频分享：vuejs教程）

<template >
  <img src="/static/imghwm/default1.png"  data-src="/_assets/logo.102c1acc.jpg"  class="lazy"   alt="logo"> // 静态节点 没有绑定任何属性
  <h1 id="Hello-nbsp-World">Hello World</h1> // 静态节点 没有绑定任何属性
  <h1 id="nbsp-text-nbsp">{{ text }}</h1>
</template>
<script>
export default {
  data() {
    return {
      text: &#39;Hello World&#39;,
    }
  },
}
</script>

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

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

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

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

静态属性也会被提升

<template >
  <div class="container"> //container 这是一个静态属性
    {{ text }} // 内容是动态的
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: &#39;Hello World&#39;,
    }
  },
}
</script>

container 也会使用变量保存

预字符串化

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

<template >
  <div class="container">
    <div class="logo">
      <h1 id="logo">logo</h1>
    </div>
    <ul class="nav">
      <li><a href="">菜单</a></li>
      <li><a href="">菜单</a></li>
      <li><a href="">菜单</a></li>
      <li><a href="">菜单</a></li>
    </ul>

    <div class="user">
      {{ user.name }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name: &#39;张三&#39;
      }
    }
  },
}
</script>

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

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

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

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

缓存事件处理函数

<template >
  <button @click="handleClick">点一下</button>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    handleClick() {
      console.log(&#39;点击了&#39;)
    }
  },
}
</script>

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 是如何进行对比的, 其实在当在创建节点时有有一个标记记录了该节点的类型

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

PatchFlag

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

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

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

<template >
  <div class="logo">
    <h1 id="nbsp-text-nbsp">{{ text }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: &#39;Hello World&#39;,
    }
  },
}
</script>

l.logo中只有 h1태그

이며, 태그는 그렇지 않습니다. v-bind 바인딩 속성을 사용하세요.

vue3에서는

정적 노드

로 간주됩니다. (학습 영상 공유: vuejs tutorial)rrreeevue3

정적 노드

는 render 함수의 변수에 저장되므로 정적 노드는 한 번만 생성됩니다.

rrreee이를 증명하려면 로컬에서 vue3

프로젝트를 생성하고 네트워크 요청을 확인하세요

정적 속성도 승격됩니다rrreee컨테이너도 사용됩니다 변수 저장🎜🎜

사전 문자열화🎜🎜실제 개발에서 템플릿의 상당 부분은 실제로 정적 노드입니다🎜rrreee🎜🎜vue3🎜 컴파일러 🎜큰 숫자를 만날 때 연속적인 정적 노드🎜, 일반 캐릭터 생성 노드🎜🎜.logo .nav로 직접 컴파일됩니다. 🎜vue2🎜에 따라 처리되는 경우 전체 div는 정적 노드입니다. 재귀 생성 처리🎜🎜를 수행합니다. 🎜vue3🎜에서는 문자열로 직접 변환된 다음 실제 🎜dom🎜을 생성할 때 🎜innerHTML🎜 속성에 할당되므로 🎜vue2🎜에서 재귀 생성 시간이 줄어듭니다. 🎜🎜🎜🎜Pre -stringified 성능 개선은 처음 생성했을 때의 개선뿐 아니라, 렌더 기능에서 다시 렌더링할 때의 개선으로 대량의 가상 노드 비교 시간이 단축됩니다(매우 무섭습니다)🎜

캐시 이벤트 처리 기능 🎜rrreee🎜handleClick 이벤트, 🎜vue2🎜 및 🎜vue3🎜🎜rrreee🎜_cache[1] || (_cache[1] = (... args)=>($options.handleClick && $options.handleClick(...args))) 이 코드는 이벤트 함수의 캐시입니다🎜

Block Tree🎜🎜🎜vue3🎜도 가상 노드 트리를 비교할 때 최적화되었습니다🎜🎜🎜vue2🎜 이전 노드 트리와 새 노드 트리를 비교할 때 어떤 노드가 정적이고 어떤 노드가 동적인지 알 수 없으므로 다음을 수행할 수 있습니다. 한 번에 한 레이어씩만 비교하세요. 레이어 비교로 인해 정적 노드 비교에 많은 시간이 낭비됩니다🎜🎜🎜vue3🎜비교하는 방법은 실제로 노드를 생성할 때 노드의 유형을 기록하는 표시가 있습니다. node🎜🎜🎜🎜 여기서🎜-1🎜 사실 노드의 종류를 표시하기 위한 것이므로 🎜Block Tree🎜에 있을 때 이 표시를 기준으로 정적 노드 비교를 직접 건너뛸 수 있어 비교 시간을 단축할 수 있습니다. 🎜

PatchFlag🎜🎜🎜PatchFlag🎜는 🎜Block Tree🎜를 더욱 최적화한 것입니다. 단일 노드를 비교할 때 속성, 콘텐츠 등을 비교합니다. 🎜🎜🎜vue2🎜 단일 노드를 비교할 때 어느 노드를 비교해야 할지 모르기 때문에 한번에 모두 비교합니다 🎜🎜🎜vue3🎜 그러면 그 속성이 동적이라는 것을 알고 각 노드마다 동적 속성만 비교합니다. update🎜rrreee🎜l. 로고의 h1 내용만 동적이므로 로고 가상 노드를 생성할 때 여기에 🎜🎜🎜🎜🎜로 표시됩니다 🎜1🎜 내용이 동적임을 표시하는 것이므로 비교할 때 🎜content🎜가 변경되었는지만 비교하면 비교 시간이 크게 단축됩니다(끔찍함)🎜🎜Summary🎜🎜위의 최적화는 모두 🎜vue3의 강력한 컴파일러에 의존합니다. 🎜끔찍함🎜🎜(동영상 공유 학습: 🎜웹 프론트엔드 개발🎜, 🎜프로그래밍 입문🎜)🎜

위 내용은 vue3이 왜 빠른가요? vue3의 효율성은 주로 어떤 측면에서 향상되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!