vue3.0与vue2.0的区别

Adelbert 1002@

已于 2023-06-07 16:53:33 修改

阅读量1.5w

点赞数 26

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-06-07 13:54:14 首次发布

本文链接：https://blog.csdn.net/qq_40946635/article/details/131082784

版权

vue 专栏收录该内容

1 篇文章 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.defineProperty
Vue 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 3.0中采用了更加高效的标记和补丁方式，使得页面渲染更加快速和稳定
更小的bundle大小：Vue 3.0使用了tree-shaking和基于ES2015的模块系统，使得框架的bundle大小更加的小。

四、生命周期

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 指令可以用更简洁的语法代替：

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

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 等方面进行了多方面的改进和优化，在性能表现上有着较大的提升。

总结

综上可以看出，Vue 3.0在性能方面：

有更快的渲染速度：Vue 3.0在虚拟DOM和响应式系统方面进行了优化，可以实现更快的渲染速度。
有更小的代码体积：Vue 3.0采用了Tree-shaking技术，可以消除未使用的代码，从而减小应用程序的体积。
有更高的容错性：在Vue 3.0中，模板编译错误会抛出编译期错误而不是运行时错误，从而更早地发现问题。

其次，Vue 3.0引入了组合式API，使得开发者可以更轻松地组合逻辑，这提高了开发体验。组合式API的优势在于：

可以更好地组织代码结构和逻辑。
可以更方便地复用逻辑和代码片段。
可以更灵活地跨越组件进行逻辑抽象。

最后，Vue 3.0还提供了一些新特性，例如：

teleport：提供了更多灵活的组件位置控制方式。
新的响应式API：提供了更多的API，如watchEffect、ref、computed等，使得开发者可以更方便地处理响应式数据。
Fragment：可以在组件中使用多个元素而不需要用一个外层元素包裹它们。

总的来说，Vue 3.0相对于Vue 2.0更加稳定、快速、灵活，但也需要一定的学习成本，需要我们重新适应，学无止境啊。

Adelbert 1002@

关注

26
点赞
踩
109

收藏

觉得还不错? 一键收藏
1
评论
vue3.0与vue2.0的区别

Vue 3.0是一个用于构建用户界面的JavaScript框架。相比于Vue 2.x，Vue 3.0在性能、体积和开发体验上都有了很大的提升。有更快的渲染速度：Vue 3.0在虚拟DOM和响应式系统方面进行了优化，可以实现更快的渲染速度。有更小的代码体积：Vue 3.0采用了Tree-shaking技术，可以消除未使用的代码，从而减小应用程序的体积。有更高的容错性：在Vue 3.0中，模板编译错误会抛出编译期错误而不是运行时错误，从而更早地发现问题。
复制链接

扫一扫