【vue】vue 版本2和3区别

vue 版本2和3区别

相关文章

vue 版本2和3区别

一、栈调度到协调更新

Vue 2 使用栈调度，是一种同步执行更新任务的方式。在栈调度中，更新任务会被依次放入执行栈中，并按照入栈顺序依次执行。只有当一个更新任务执行完毕后，才会执行下一个更新任务。
- 优点：栈调度的实现简单直观，易于理解和调试。
- 缺点：栈调度可能会导致长时间的任务阻塞主线程，影响页面的响应速度和流畅性。由于更新任务是同步执行的，因此无法有效地处理优先级较高的任务，可能会导致用户交互不及时。
Vue 3 使用协调更新，是一种基于优先级的更新处理方式。在协调更新中，更新任务会根据一定的优先级被调度执行，以确保优先级较高的任务能够得到更及时的响应。协调更新通常采用时间片段调度和任务优先级调度等策略，以提高页面的性能和用户体验。
- 优点：协调更新能够更灵活地处理更新任务，并根据任务的优先级来决定执行顺序，从而提高页面的响应速度和流畅性。它能够有效地处理优先级较高的任务，如用户交互和动画等。
- 缺点：协调更新的实现相对复杂，需要考虑更多的因素，如任务优先级、时间片段调度等。由于更新任务是异步执行的，可能会导致一些复杂的同步问题和调试困难。

关于Long Task详细可参考怎样去优化Long Task

二、响应式系统

Vue 2 使用 Object.defineProperty 来实现响应式系统，而 Vue 3 使用 Proxy。
Vue 3 的 Proxy 实现更加高效，追踪属性变化的性能更好，尤其在大型应用中表现更出色。

三、Composition API

Vue 3 引入了 Composition API，这是一种基于函数的 API 设计风格，使得组件内部逻辑更清晰、灵活和可复用。
Vue 2 使用的是 Options API，相比之下，Composition API 更适合处理复杂逻辑和状态管理。

四、Teleport 组件

Vue 3 新增了 Teleport 组件，允许在组件的模板中指定一个目标位置，将组件的内容渲染到该位置，而不受组件在 DOM 结构中的位置限制。

<template>
  <div>
    <button @click="showModal">Show Modal</button>
    
    <!-- Teleport 组件的目标位置 -->
    <teleport to="body">
      <Modal v-if="isModalVisible" @close="closeModal" />
    </teleport>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Modal from './Modal.vue';

export default defineComponent({
  components: {
    Modal,
  },
  setup() {
    const isModalVisible = ref(false);

    const showModal = () => {
      isModalVisible.value = true;
    };

    const closeModal = () => {
      isModalVisible.value = false;
    };

    return {
      isModalVisible,
      showModal,
      closeModal,
    };
  },
});
</script>

在上述示例中，我们创建了一个包含一个按钮的组件。当用户点击按钮时，会触发 showModal 方法，从而显示模态框。模态框的内容被包裹在 Teleport 组件内部，并使用 to 属性指定了目标位置为 body，这意味着模态框的内容会被渲染到页面的 <body> 元素下。

五、Fragments

Vue 3 支持 Fragments，允许在模板中直接使用多个根节点，而不需要额外包裹一个父元素。

六、编译器优化

Vue 3 的编译器经过重新设计和优化，生成的代码更加精简和高效，提高了应用的运行性能。
- 静态节点提升（Static Node Hoisting）：
  
  编译器会在编译阶段分析模板，将那些不需要改变的静态节点提升到渲染函数的外部，这样可以避免在每次渲染时都重新创建静态节点，从而减少了不必要的 DOM 操作，提高了渲染性能。
- 事件侦听器优化：
  
  编译器会对事件侦听器进行优化，将那些不需要改变的事件绑定提升到渲染函数的外部，避免了每次渲染时都重新创建事件侦听器，减少了内存开销和事件绑定的性能消耗。

七、Tree-Shaking 支持

Vue 3 对 Tree-Shaking 的支持更好，使得在构建时能够更有效地剔除未使用的代码，减小了包体积。
- Vue 3 支持 Tree-Shaking 的主要原因是它采用了 ES Module（ECMAScript 模块）的模块系统。ES Module 是一种静态的模块系统，能够在编译阶段分析模块的依赖关系，并且只导入模块中被使用的部分，从而在构建时可以更容易地剔除未使用的代码。

八、TypeScript 支持

Vue 3 对 TypeScript 的支持更加完善，包括更准确的类型推断和更好的 IDE 支持，使得在使用 TypeScript 进行开发时更加顺畅。

九、JSX 的支持

Vue 2 原生并不支持 JSX，但是可以通过一些工具或者插件来实现在 Vue 2 中使用 JSX。例如，可以使用 vue-jsx-loader 这样的 loader 或者 @vue/babel-preset-jsx 这样的 Babel 插件来将 JSX 转换为 Vue 的渲染函数。
Vue 3 提供了对 JSX 的内置支持，使得开发者可以直接在 Vue 3 中使用 JSX 来编写组件。在 Vue 3 中，可以使用内置的 createVNode 函数来创建虚拟节点（Virtual Node），从而实现对 JSX 的支持。