vue3.0和vue2.0的区别详细讲解

vue经历从2.0到3.0更新之后,简⽽⾔之就是变得更轻更快,使⽤起来更加⽅便,下面这篇文章主要给大家介绍了关于vue3.0和vue2.0区别的相关资料,需要的朋友可以参考下

Vue 3.0是一个用于构建用户界面的JavaScript框架。相比于Vue 2.x，Vue 3.0在性能、体积和开发体验上都有了很大的提升。

以下将从不同的角度上去分析Vue 3.0与Vue 2.0的区别：

一、项目架构

• 从项目搭建和打包工具的选择来看：

• Vue 2.0 中通常会选择使用 webpack 或者 vue-cli 来进行项目搭建和打包。这些工具较为成熟和稳定，支持插件化和自定义配置，但是配置过于复杂，需要耗费较多的时间和精力来理解和维护。
• 而 Vue 3.0 中则更加推崇使用 Vite 这款新型的前端构建工具，其基于 ES Modules 标准的优点，使得整个开发过程速度大大提升。使用 Vite 工具，不仅能够提高编译速度，还能够简化开发过程和调试过程。

• 从架构的设计思路和实现方式来看：

• Vue 2.0 中通常会采用大型 monolithic 系统架构模式，即将整个项目打包成一个庞大的文件，加载速度慢，模块化能力较弱。这种模式容易导致开发难度大，难以维护。
• 而 Vue 3.0 则更倾向于使用组合式 API + TypeScript 的方式来进行架构设计和实现。组合式 API 是 Vue 3.0 中引入的新特性，它能够使开发人员更加灵活的进行组件开发和复用。同时，使用 TypeScript 在架构上也增加了更加严格的类型校验，能够在编译阶段发现许多潜在的问题，提高代码质量和可维护性。这种模式使得代码更加简洁，结构更加清晰，便于组件化和模块化管理。

二、数据响应式系统 

• Vue 2.0中的数据响应式系统，主要是通过Object.defineProperty()方法来实现的。每个数据属性被定义成可观察的，具有getter和setter方法，当这些属性被修改后，Vue会自动追踪并重新计算相关的渲染函数，并更新视图。然而，这种方法存在一些限制，比如无法扩展属性和删除属性，也不能对新添加的属性进行响应化，同时在大规模数据变化时，这种方法也会带来性能问题。

• Vue 3.0在数据响应式系统方面，在Vue 2.0的基础上进行了重构和改进，实现了更快速、更稳定的数据响应式。具体改进如下：

• Proxy替换Object.definePropertyVue 3.0使用了ES6中的Proxy代理对象来替代Object.defineProperty()方法。Proxy对象可以拦截对象上的一些操作，比如读取、修改、删除等，从而实现更加灵活的响应式更新。

• 更好的响应式追踪在Vue 3.0中，响应式变量的追踪由Track和Trigger两个阶段完成。Track阶段用于追踪响应式变量的读取，Trigger阶段用于重新计算相关的渲染函数并更新视图。这种方式可以避免了无效渲染，提高了应用的性能。

• 更灵活的响应式更新Vue 3.0还增加了watchEffect API和ref API等新API，可以更加灵活地对响应式变量进行操作。watchEffect可以监听响应式变量，并在变量变化时自动执行副作用函数。ref可以把普通变量转换成响应式变量，并返回一个带有value属性的对象。这些新API可以方便地扩展和操作响应式系统。

三、虚拟DOM 

• Vue 2.0 的生命周期：

• beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置 (event/watcher option) 之前被调用。
• created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。
• beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted：实例挂载完成后调用，这时 el 被新创建的 vm.$el 替换了。
• beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。这里适合在更新之前访问现有DOM，如移除手动设置的class。
• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
• activated：在组件章节中深入讨论过，这里不做详细讲解。
• deactivated：在组件章节中深入讨论过，这里不做详细讲解。
• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：实例销毁后调用。这时候，绑定在实例上的全部指令、事件监听器都会被移除，所有子实例也会被销毁。

• Vue 3.0 的生命周期：

• onBeforeMount：在挂载之前被调用，与 Vue 2.0 中的 beforeMount 类似。
• onMounted：在挂载之后被调用，与 Vue 2.0 中的 mounted 类似。
• onBeforeUpdate：在更新之前被调用，与 Vue 2.0 中的 beforeUpdate 类似。
• onUpdated：在更新之后被调用，与 Vue 2.0 中的 updated 类似。
• onBeforeUnmount：在卸载之前被调用，与 Vue 2.0 中的 beforeDestroy 类似。
• onUnmounted：在卸载之后被调用，与 Vue 2.0 中的 destroyed 类似。
  可以看到，Vue 3.0 对生命周期进行了一些小的调整，并不影响使用，而且增加了一些新的钩子函数，极大的方便使用者进行开发和维护。

五、组件实例的创建方式 

Vue 2.0中组件实例的创建是通过Vue.extend()方法或者组件的对象字面量方式进行创建的，而在Vue 3.0中，组件实例的创建是通过标准的ES2015的类方式进行创建的。

Vue 2.0 的组件实例创建方式：

Vue.component('my-component', {
  // 组件配置
  // ...
});
// 创建根实例，渲染组件
new Vue({
  el: '#app',
  template: '<my-component></my-component>'
})

Vue 3.0 的组件实例创建方式：

import { defineComponent } from 'vue';
// 定义组件
const MyComponent = defineComponent({
  // 组件配置
  // ...
});
// 导出组件
export default MyComponent;

在 Vue 3.0 中，我们可以使用 defineComponent() 方法快速定义组件，然后直接导出即可。这个方法返回一个组件选项对象，不同于 Vue 2.0 中的组件配置对象，它具有类型检查、组合式 API、构建工具集成以及更好的 IDE 支持等优点。而且，Vue 3.0 中的组件实例创建过程更加简单，我们只需要把组件导出即可在其他文件中使用。

代码示例：

// MyComponent.vue
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `
});

在这个示例中，我们使用 defineComponent() 方法来定义一个组件并导出。该组件包含一个名为 count 的计数器，并提供方法 increment() 来增加计数器的值。组件的模板包含了一个展示当前计数器值和一个点击按钮，每次点击按钮都会执行 increment() 方法来增加计数器的值。我们可以像下面这样在其他地方使用它：

// main.js
import { createApp } from 'vue';
import MyComponent from './MyComponent.vue';
const app = createApp({});
app.component('my-component', MyComponent);
app.mount('#app')

在这个示例中，我们使用 createApp() 方法创建一个应用实例，并强制声明组件 MyComponent 作为 my-component 组件的名称，然后将其挂载在 DOM 上。在这个过程中，我们不需要使用 Vue.extend() 或者 Vue.component() 来创建组件实例，而可以直接使用 defineComponent() 方法定义组件并导出，然后在其他地方使用它。这是 Vue 3.0 中组件实例创建比 Vue 2.0 更加简单的一个例子。

六、路由

从路由的角度来看，Vue 2.0 和 Vue 3.0 的最大区别在于 Vue Router 的使用方式和 API 的变化。
在 Vue 2.0 中，我们需要使用 Vue.use(VueRouter) 来引入 Vue Router，然后创建一个 Router 实例，并在根组件中使用它：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

然后在 main.js 中导入 Router 并使用它：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在 Vue 3.0 中，Vue Router 的使用方式发生了变化。现在，我们需要使用 createRouter 工厂函数来创建路由实例，然后将其传递给根组件使用：

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
const routes = [
  { path: '/', component: HelloWorld }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

然后，在 main.js 中，我们需要通过 app.use(router) 将路由实例挂载到根组件上：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

总的来说，Vue Router 在 Vue 3.0 中提供了更加灵活的 API 和更好的类型推断支持，但是它的使用方式与 Vue 2.0 有所不同。因此，如果你想升级到 Vue 3.0，并且在你的项目中使用了 Vue Router，就必须阅读相关文档，并进行一些相应的修改才能够使用。

七、请求

• 使用的 HTTP 请求库：

• 在 Vue 2.0 中，通常会使用第三方库 axios 或者 vue-resource 来进行 HTTP 请求的封装。这些库通常需要在全局导入后才能使用，然后通过在组件内部使用相关方法来发起请求。虽然这种方式比较灵活，但是需要编写较多的重复代码，并且类型推断和类型校验的支持也较差。
• 而在 Vue 3.0 中，官方推荐的 HTTP 请求库是 axios 的替代品 - vite-plugin-mock，该库内置了一套基于 axios 的请求拦截和响应拦截机制，并且已经在 Vite 中默认启用了。这种方式可以大大减少编写重复代码的工作量，同时也支持更好的类型推断和类型校验。

• 封装请求时的代码风格和规范：

• Vue 2.0 中通常会采用类似 Promise 封装的方式，例如将请求代码封装为一个函数，然后返回一个 Promise。而 Vue 3.0 中则更倾向于使用 async/await 来封装请求代码。这种方式可以让代码更加简洁易懂，同时也支持更好的错误处理和异常捕获。

八、模板指令 

• v-bind 指令：在 Vue 2.0 中，可以使用 v-bind 指令将属性绑定到一个变量或表达式上，例如：

<div v-bind:class="{'active': isActive}"></div>

 在 Vue 3.0 中，v-bind 指令可以用更简洁的语法代替：

在 Vue 3.0 中，v-bind 指令可以用更简洁的语法代替：

• v-if 和 v-for 指令：在 Vue 2.0 中，v-if 和 v-for 指令不能同时使用，因为 v-for 比 v-if 先执行，导致渲染出不必要的组件。

  在 Vue 3.0 中，v-if 和 v-for 可以同时使用，但是需要将 v-if 指令放在 v-for 指令的父元素上：

   <div v-if="show">
     <div v-for="item in items" :key="item.id">{{ item }}</div>
   </div>

 

• v-model 指令：在 Vue 2.0 中，v-model 指令是一个语法糖，可以将表单元素的 value 属性和 input 事件绑定到一个变量或表达式上。

  在 Vue 3.0 中，v-model 指令实现了双向绑定的核心逻辑，语法也进行了改进，可以更加灵活地绑定表单元素和数据：

   <input v-model="count" type="number">
   <!-- 等价于 -->
   <input :value="count" @input="count = $event.target.value" type="number">

在 Vue 3.0 中，v-model 指令也支持自定义组件，可以通过配置 props 和事件来实现双向绑定。 

 九、API

• Vue 2.x 中，我们通过使用选项式 API 来定义组件。即在组件选项中声明 data、methods、computed、watch 等属性和方法来创建组件。这样的定义方式，虽然简单易懂，但不利于代码组织与复用。当组件逻辑变得复杂时，代码往往会变得难以维护。

• Vue 3.0 中引入了组合式 API，也被称为函数式 API。它允许我们使用函数来创建组件，将选项拆分成更小的函数，有利于组件代码的重组和重用。组合式 API 的主要特点是基于函数的解耦和复用性，可以把组件上的逻辑拆分成更小、更可重用的代码单元。

• 组合式 API 中的核心函数是 setup()，它是一个在组件内部调用的函数，负责组成组件逻辑的主要功能。使用 setup() 函数，可以访问到组件的 props、context、attrs、slots 和 emit 等属性。

• 在 Vue 3.0 中，我们可以从 setup() 函数中返回一个对象，这个对象中可以包含属性和方法等，这些属性和方法可以被认为是 Vue 3.0 中的组件选项。这些选项包括 data、computed、methods、watcher 和生命周期钩子等等。

• 需要注意的是，在 Vue 3.0 中，组件选项已经与组件实例分离，实例上的所有选项都是在 setup() 函数的执行过程中创建的，这也保证了组合式 API 的解耦和易于重构。

• 总体来说，Vue 3.0 的组合式 API 可以让开发者更好地组织代码，提高代码可复用性和可维护性。同时由于 setup() 函数的特殊性质，也能使 Vue 3.0 的性能得到提升。

十、diff 算法 

• 在 Vue 2.0 中，diff 算法是通过比较新旧虚拟 DOM 树来确定必须更新的 DOM 元素的最小集合。这个过程涉及到 DOM 树的遍历和对比，非常消耗性能，尤其是在更新大量数据时，会带来性能瓶颈。

• Vue 3.0 中的 diff 算法进行了改进和优化，采用了编译时优化的动态标记，并使用静态分析技术来确定哪些节点是静态的，哪些是动态的。这样，在进行 diff 比较时，只需要对动态节点进行比较，避免了对静态节点的不必要操作，从而提高了性能。

• Vue 3.0 中的 diff 算法还引入了「静态节点提升」的优化，即将静态节点从渲染函数中提取出来，以减少冗余的 DOM 操作。这个技术可以减少虚拟 DOM 的创建和比较次数，从而提高性能。

• 此外，Vue 3.0 引入了 Block Tree，通过在编译期预处理模板，可以将整个模板划分成多个块，每个块拥有自己的特定标识，使得在进行 diff 比较时，只需要比较同一标识块内的节点，从而提高了 diff 算法的效率。

• 总之，Vue 3.0 中的 diff 算法在编译时优化、静态节点提升、Block Tree 等方面进行了多方面的改进和优化，在性能表现上有着较大的提升。