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.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大小更加的小。

     四、生命周期

       1. 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 中默认启用了。这种方式可以大大减少编写重复代码的工作量，同时也支持更好的类型推断和类型校验。


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

八、模板指令

  1. 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在性能方面：

    有更快的渲染速度：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更加稳定、快速、灵活，但也需要一定的学习成本
     

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/105514.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

红队专题-Cobalt strike 4.x - Beacon重构

红队专题-Cobalt strike 4.x - Beacon重构

红队专题 招募六边形战士队员重构后 Beacon 适配的功能windows平台linux和mac平台C2profile 重构思路跨平台功能免杀代码部分sysinfo包packet包config.go命令的执行shell、run、executepowershell powerpick命令powershell-importexecute-assembly 堆内存加密字符集 招募六边形…
阅读更多...
云原生安全应用场景有哪些？

云原生安全应用场景有哪些？

当今数字化时代&#xff0c;数据已经成为企业最宝贵的资产之一&#xff0c;而云计算作为企业数字化转型的关键技术&#xff0c;其安全性也日益受到重视。随着云计算技术的快速发展&#xff0c;云原生安全应用场景也越来越广泛&#xff0c;下面本文将从云原生安全应用场景出发&a…
阅读更多...
深入了解桶排序：原理、性能分析与 Java 实现

深入了解桶排序：原理、性能分析与 Java 实现

桶排序&#xff08;Bucket Sort&#xff09;是一种排序算法&#xff0c;通常用于将一组数据分割成有限数量的桶&#xff08;或容器&#xff09;&#xff0c;然后对每个桶中的数据进行排序&#xff0c;最后将这些桶按顺序合并以得到排好序的数据集。 桶排序原理 确定桶的数量&am…
阅读更多...
Linux寄存器+Linux2.6内核进程调度队列+命令行参数+环境变量

Linux寄存器+Linux2.6内核进程调度队列+命令行参数+环境变量

目录 一、寄存器 二、Linux2.6内核进程调度队列 &#xff08;一&#xff09;优先级 &#xff08;二&#xff09;活动队列 &#xff08;三&#xff09;过期队列 &#xff08;四&#xff09;active指针和expired指针 三、命令行参数 &#xff08;一&#xff09;举例一 &…
阅读更多...
Stm32_标准库_10_TIM_显示时间日期

Stm32_标准库_10_TIM_显示时间日期

利用TIM计数耗费1s,启动中断&#xff0c;秒表加一 时间显示代码&#xff1a; #include "stm32f10x.h" // Device header #include "Delay.h" #include "OLED.h"uint16_t num 0; TIM_TimeBaseInitTypeDef TIM_TimeBaseInitStructure; NVIC_I…
阅读更多...
三十四、【进阶】MySQL索引的操作

三十四、【进阶】MySQL索引的操作

1、创建索引 &#xff08;1&#xff09;基础语法 &#xff08;2&#xff09;唯一索引 唯一索引与普通索引不同的是&#xff0c;索引列的数值必须唯一&#xff0c;但允许有空值null&#xff1b; 唯一索引与主键索引不同的是&#xff0c;主键索引不允许出现空值null&#xff0…
阅读更多...
FPGA设计时序约束五、设置时钟不分析路径

FPGA设计时序约束五、设置时钟不分析路径

一、背景 在进行时序分析时&#xff0c;工具默认对所有的时序路径进行分析&#xff0c;在实际的设计中&#xff0c;存在一些路径不属于逻辑功能的&#xff0c;或者不需要进行时序分析的路径&#xff0c;使用set_false_path对该路径进行约束&#xff0c;时序分析时工具将会直接忽…
阅读更多...
python selenium下载一个合适的chromedriver.exe(稳定版本）

python selenium下载一个合适的chromedriver.exe(稳定版本）

可以使用该脚本来进行下载&#xff1a; 下载前需要安装如下的依赖 requests2.27.1 selenium4.14.0 webdriver_manager4.0.1下载脚本代码&#xff1a; import json import subprocess import shutil import os import time import zipfileimport requests from webdriver_mana…
阅读更多...
transformers架构实现

transformers架构实现

目录 架构代码如下 模型打印如下 架构代码如下 import numpy as np from torch.autograd import Variable import copy from torch import softmax import math import torch import torch.nn.functional as F import torch.nn as nn # 构建Embedding类来实现文本嵌入层 class…
阅读更多...
百度车牌识别AI Linux使用方法-armV7交叉编译

百度车牌识别AI Linux使用方法-armV7交叉编译

1、获取百度ai的sdk 百度智能云-登录 (baidu.com) 里面有两个版本的armV7和armV8架构。v7架构的性能比较低往往需要交叉编译&#xff0c;v8的板子性能往往比较好&#xff0c;可以直接在板子上编译。 解压到ubuntu里面。这里介绍v7架构的。 2、ubuntu环境配置 ubuntu下安装软件…
阅读更多...
1373. 二叉搜索子树的最大键值和

1373. 二叉搜索子树的最大键值和

1373. 二叉搜索子树的最大键值和 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def __init__(self):self…
阅读更多...
网络编程基础知识总结——IP，端口，协议

网络编程基础知识总结——IP，端口，协议

目录 1. 什么是网络编程&#xff1f; 2. 网络编程的三要素 3. IP 3.1 IP地址的概念 3.2 IP地址的分类 3.3 IPv4解析 3.4 Ipv6解析 4. IPv4 的使用细节 5. 特殊IP地址 4. 端口号 5. 协议 5.1 UDP协议 5.2 TCP协议 1. 什么是网络编程&#xff1f; 总的来说就是一句…
阅读更多...
[计算机提升] Windows系统权限

[计算机提升] Windows系统权限

1.2 Windows系统权限 在Windows操作系统中&#xff0c;权限是指授予用户或用户组对系统资源进行操作的权利。权限控制是操作系统中重要的安全机制&#xff0c;通过权限控制可以限制用户对系统资源的访问和操作&#xff0c;从而保护系统安全。 Windows操作系统中包含以下几种权…
阅读更多...
Leetcode算法解析——查找总价格为目标值的两个商品

Leetcode算法解析——查找总价格为目标值的两个商品

1. 题目链接&#xff1a;LCR 179. 查找总价格为目标值的两个商品 2. 题目描述&#xff1a; 商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总和刚好是 target。若存在多种情况&#xff0c;返回任一结果即可。 示例 1&#xff1a; 输入&#xff1a;price …
阅读更多...
大语言模型迎来重大突破！找到解释神经网络行为方法

大语言模型迎来重大突破！找到解释神经网络行为方法

前不久&#xff0c;获得亚马逊40亿美元投资的ChatGPT主要竞争对手Anthropic在官网公布了一篇名为《朝向单义性&#xff1a;通过词典学习分解语言模型》的论文&#xff0c;公布了解释经网络行为的方法。 由于神经网络是基于海量数据训练而成&#xff0c;其开发的AI模型可以生成…
阅读更多...
以单颗CMOS摄像头重构三维场景，维悟光子发布单目红外3D成像模组

以单颗CMOS摄像头重构三维场景，维悟光子发布单目红外3D成像模组

维悟光子近期发布全新单目红外3D成像模组，现可提供下游用户进行测试导入。通过结合微纳光学元件编码和人工智能算法解码，维悟光子单目红外3D成像模组采用单颗摄像头，通过单帧拍摄，可同时获取像素级配准的3D点云和红外图像信息，可被应用于机器人、生物识别等广阔领域。 市场…
阅读更多...
Qt 5.12.12 静态编译（MinGW）

Qt 5.12.12 静态编译（MinGW）

前置准备 系统环境 版本 Windows 11 专业版 版本 22H2 安装日期 ‎2023/‎6/‎18 操作系统版本 22621.2428 体验 Windows Feature Experience Pack 1000.22674.1000.0依赖工具 gcc Qt 5.12.12 安装 MinGW 后自动安装 https://download.qt.io/archive/qt/5.12/5.12.12/qt-ope…
阅读更多...
三防PDA手持终端开发板-联发科MTK6765平台安卓主板方案

三防PDA手持终端开发板-联发科MTK6765平台安卓主板方案

三防手持终端安卓主板方案采用了联发科12nm八核MT6765处理器&#xff0c;配备4G64GB内存(可选配6GB256GB)&#xff0c;并搭载最新的Android 10.0操作系统。该方案支持许多功能&#xff0c;包括高亮显示屏、高清摄像头、NFC、3A快速充电、1D/2D扫描(可选配)、高精度定位(可选配)…
阅读更多...
如何编写lua扩展库

如何编写lua扩展库

很多人都听过lua,也见过lua脚本,但可能不理解为什么lua脚本里面会有这么多没见过的函数, 而且这些函数功能是如此强大,能上天入地,无所不能 其实这些函数并不是lua自带的,都是由程序作者造出来的隐藏在了他们的主程序里 一般运行lua脚本,我们会使用自带的解释器,当你拿到一份…
阅读更多...
VMware _ Ubuntu _ root 密码是什么，怎么进入 root 账户

VMware _ Ubuntu _ root 密码是什么，怎么进入 root 账户

文章目录 进入 root 账户设置 root 密码小结 在 VMware 安装 ubuntu 虚拟机之后&#xff0c;root 用户的密码是什么&#xff1f;安装的过程也没有提示输入 root 用户的密码&#xff0c;只有创建第一个非 root 用户的密码。但是 root 用户是存在的&#xff0c;又怎么切换到 root…
阅读更多...
最新文章

Copyright @ 2022~2023