vue2和vue3的不同汇总

原创已于 2024-04-18 08:06:48 修改 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2024-03-25 23:44:43 首次发布

Vue 专栏收录该内容

55 篇文章

订阅专栏

本文对比了Vue.js2和3在核心架构、性能优化（如虚拟DOM重构和编译器优化）、响应式系统改进、CompositionAPI的引入、生命周期钩子的变化等方面的主要差异，强调了Vue.js3在性能和开发体验上的提升。

原理不同：

Vue.js 2和Vue.js 3之间的原理差异主要集中在其核心架构和一些关键功能上。以下是它们之间的一些主要区别：

虚拟 DOM 重构：

Vue.js 3对虚拟 DOM 进行了重构，采用了更高效的算法和数据结构，以提高性能。Vue.js 3的虚拟 DOM 比 Vue.js 2 更轻量级，更快速。

编译器优化：

Vue.js 3的编译器进行了改进，生成的代码更加紧凑和高效，这使得 Vue.js 3 的性能比 Vue.js 2 更好。

响应式系统改进：

Vue.js 3中的响应式系统得到了改进，使其更具可预测性和稳定性。Vue.js 3中的响应式系统采用了ES6的Proxy代理对象，而不再使用Object.defineProperty，这样可以更好地跟踪属性的变化。
使用ES6的Proxy代理，更好的跟踪属性的变化，做到响应式的效果

Composition API：

Vue.js 3引入了 Composition API，这是一种新的组织组件逻辑的方式。与Vue.js 2中的Options API相比，Composition API更灵活，使得组件逻辑更容易共享和复用。

Tree-shaking支持：

Vue.js 3更好地支持tree-shaking，这意味着在构建时能更好地剔除未使用的代码，以减少最终打包的体积。

Typescript支持：

Vue.js 3更加深度地集成了Typescript，使得在使用Typescript时的开发体验更加流畅。

性能提升：

总体而言，Vue.js 3在性能方面比Vue.js 2有所提升，这得益于对核心功能的改进和优化。
这些是Vue.js 2和Vue.js 3之间一些重要的原理上的差异。Vue.js 3通过这些改进和新特性，提供了更好的性能、更好的开发体验和更好的可维护性。

组件不同：

Options API（选项式 API）是 Vue.js 2 中用来编写组件的一种方式。在 Options API 中，组件的选项被定义为一个对象，其中包含了 data、methods、computed、watch 等属性，用来组织组件的数据和方法。Options API 的特点是将组件的不同功能按照选项的方式进行组织，使得组件的结构相对清晰，适用于较简单的组件场景。Options API 在 Vue.js 2 中被广泛使用，但在处理较复杂的组件时可能会导致代码冗长和难以维护。
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  }
};
</script>
Composition API（组合式 API）是 Vue.js 3 中引入的一种新的组件编写方式。它允许开发者通过函数的方式组织组件逻辑，提供了更灵活、可组合和可重用的方式来编写 Vue 组件。Composition API 的核心思想是将逻辑按功能组织，而不是按照选项的方式进行组织，这使得在处理复杂组件时更加清晰和简洁。Composition API 的引入使得 Vue 组件的编写更加灵活和可维护。
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>
 
<script>
import { ref, computed } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
 
    function increment() {
      count.value++;
    }
 
    function decrement() {
      count.value--;
    }
 
    const doubleCount = computed(() => count.value * 2);
 
    return {
      count,
      increment,
      decrement,
      doubleCount
    };
  }
};
</script>

生命周期不同：

Vue 2 和 Vue 3 中的生命周期钩子基本相同，但在 Vue 3 中有一些生命周期钩子被重命名或者合并了。以下是 Vue 2 和 Vue 3 中常用的生命周期钩子以及它们的写法区别：

Vue 2 生命周期钩子

beforeCreate：实例刚被创建，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：实例已经创建完成，此时已经完成了数据观测和初始化，但尚未挂载到 DOM 上。

beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。

mounted：实例已经挂载到 DOM 上后调用，此时组件已经在 DOM 中，可以进行 DOM 操作。

beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：实例销毁之后调用。在这一步，所有的事件监听器和子实例已经被移除。

Vue 3 生命周期钩子

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：实例已经创建完成，此时已经完成了数据观测和初始化，但尚未挂载到 DOM 上。

beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。

onMounted：在挂载完成后调用，对应于 Vue 2 中的 mounted 钩子。

beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

onUpdated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

beforeUnmount：在卸载之前调用。

onUnmounted：在卸载之后调用，对应于 Vue 2 中的 destroyed 钩子。