【Vue2和Vue3的区别】_vu2和vu3的区别-CSDN博客

本文链接：https://blog.csdn.net/gaotlantis/article/details/142496809

Vue3新特性

1、速度更快

一. 响应式系统的重写 Proxy和Object.defineProperty详细解释juejin.cn/post/741752…

Proxy替代Object.defineProperty：Vue3使用ES6的Proxy API来重写响应式系统，替代了Vue2中的Object.defineProperty方法。Proxy可以拦截对象属性的读取、赋值、枚举、函数调用等操作，从而在数据变化时提供更高效、更灵活的响应。而Object.defineProperty只能拦截属性的setter和getter，且需要递归地对所有属性进行监听，效率较低。
减少不必要的性能开销：Vue3通过Proxy实现的响应式系统，能够更精确地追踪数据的变化，只有在数据真正被使用时才会进行响应式处理，从而减少了不必要的性能开销。

二. 虚拟DOM的重写与优化

静态标记（Patch Flag） ：Vue3在虚拟DOM中引入了静态标记，可以在编译阶段确定哪些节点是静态的，从而在后续的更新过程中跳过这些不会发生变化的节点，减少了不必要的diff操作和渲染开销。
Patch算法的优化：Vue3的Patch算法将对比过程拆分为多次任务，通过优先级调度和细粒度的控制实现了增量更新，减少了更新的范围和操作次数，提高了性能。

三. 编译器的优化

更高效的代码生成：Vue3的编译器进行了重写，能够生成更高效、更紧凑的代码，进一步提升了性能。
模板优化：Vue3引入了基于模板的将来API，允许在编译时进行更多的静态优化，减少运行时的计算量。

四. 其他优化措施

更好的TypeScript支持：Vue3在类型定义方面进行了改进，提供了更严格的类型检查，使得开发者在开发过程中能够更早地发现错误，减少了调试和修复的时间。

2、体积减少

Tree-shaking支持：Vue3提供了更好的Tree-shaking支持，可以剔除项目中没有使用的代码，减小打包体积，提高加载速度。

3、更易维护

一. 引入Composition API

Vue3引入了Composition API，它采用函数式编程风格，允许将组件的逻辑封装到setup函数中，并使用新的响应式API（如reactive、ref等）来定义响应式数据。这种设计方式使得相关功能的代码更加有序地组织在一起，提高了代码的可读性和可维护性。与Vue2的选项式API相比，Composition API在构建复杂应用时更加灵活和强大，能够更好地支持代码的重用和模块化。

Composition API（Vue3）与Options API(Vue2)区别

juejin.cn/post/741747…

二. 更好的TypeScript支持 Vue3对TypeScript的支持更加严格和完整，提供了更加准确的类型检查和错误提示。这有助于开发者在编写代码时及时发现并修复潜在的错误，提高了代码的质量和可维护性。同时，TypeScript的强类型特性也使得代码更加清晰易懂，便于团队成员之间的协作和沟通。

4、更接近原生

Vue 3允许开发者自定义渲染API，这意味着开发者可以根据需要定制Vue的渲染过程。这种灵活性使得Vue 3能够更好地适应不同的开发场景和需求，从而更接近于原生应用的定制化和灵活性。

import { createApp, defineComponent, h } from 'vue';  

// 使用Composition API定义组件  
const App = defineComponent({  
  setup() {  
    // 这里可以定义响应式状态、计算属性、方法等  
    const message = 'Hello, Vue 3 with TypeScript!';  
  
    // 返回一个对象，该对象中的属性或方法可以在模板中使用  
    return {  
      message  
    };  
  },  
  render() {  
    // 使用JSX或h函数来定义模板  
    return h('div', this.message);  
  }  
});  
  
// 创建Vue应用  
const app = createApp(App);  
  
// 挂载应用到DOM元素上  
const mountPoint = document.getElementById('app');  
if (mountPoint) {  
  app.mount(mountPoint);  
}

5、更易使用

暴露Api

<template>  
  <div>  
    <p>{{ count }}</p>  
    <button @click="increment">Increment</button>  
    <button @click="decrement">Decrement</button>  
  </div>  
</template>  
  
<script setup lang='ts'>
import { defineComponent, ref } from 'vue';  
  
    // 使用ref创建响应式状态  
    const count = ref(0);  
  
    // 定义增加和减少的方法  
    function increment() {  
      count.value++;  
    }  
  
    function decrement() {  
      count.value--;  
    }  
</script>

6、Vue 3 引入了三个新的内置组件

Fragment、Teleport 和 Suspense：Vue 3 引入了三个新的内置组件：Fragment、Teleport 和 Suspense。这些组件提供了更强大的功能，使得开发者能够以更灵活的方式构建组件和页面。例如，Teleport 允许你将子组件渲染到DOM中的另一个位置，而Suspense 则提供了一种等待异步组件时显示备用内容的方式。

一、Fragment

在Vue 3中，当模板包含多个根节点时，Vue会自动将它们视为一个Fragment（虽然在实际DOM中并不会显示为一个<fragment>元素，而是直接渲染这些节点），从而避免了Vue 2中要求单个根元素的限制。

<template>  
  <!-- 这里没有显式的根元素，Vue 3会自动处理为Fragment -->  
  <p>这是第一个段落。</p>  
  <p>这是第二个段落。</p>  
</template>

二、Teleport

Teleport 是 Vue 3 引入的一个内置组件，它允许你将组件模板的一部分渲染到 DOM 中当前组件之外的位置。这对于处理模态框、下拉菜单、提示框等需要渲染到页面特定位置的组件特别有用。

  <!-- 触发模态框的按钮 -->  
  <button @click="showModal = true">打开模态框</button>  
  
  <!-- Teleport 组件，将内容渲染到 body 结尾 -->  
  <Teleport to="body">  
    <div v-if="showModal" class="modal">  
      <div class="modal-content">  
        <span class="close" @click="showModal = false">&times;</span>  
        <p>这是一个模态框！</p>  
      </div>  
    </div>  
  </Teleport>  
</template>

三、Suspense

Suspense 是 Vue 3 引入的一个内置组件，它允许你在组件树中等待异步组件或异步操作完成之前，先渲染一些备用内容，并在等待的异步操作完成后显示实际的内容。这对于提升用户体验特别有用，尤其是在加载数据或渲染重组件时。

<template>  
  <Suspense>  
    <!-- 异步组件加载时的备用内容 -->  
    <template #default>  
      <div>  
        <p>加载中...</p>  
      </div>  
    </template>  
  
    <!-- 异步组件加载成功后的内容 -->  
    <template #fallback>  
      <AsyncComponent />  
    </template>  
  </Suspense>  
</template>  
  
<script setup lang="ts">  
// 假设我们有一个异步组件 AsyncComponent  
// 可以通过 defineAsyncComponent 来动态导入  
import { defineAsyncComponent } from 'vue';  
  
const AsyncComponent = defineAsyncComponent(() =>  
  import('./AsyncComponent.vue')  
);  
</script>  
</style>

原文：https://juejin.cn/post/7417498449174954018