Vue3对比Vue2的优点总结

1.为什么要有vue3

我们使用vue2常常会遇到一些体验不太好的地方,比如:

  1. 随着功能的增长,需求的增加,复杂组件的代码越来越难以维护,逻辑混乱,虽然vue2也有一些复用的方法,但是都存在一定的弊端,比如我们常常用的Mixin,特别容易发生命名冲突,暴露出来的变量意图不是很明显,重用到其他组件容易冲突。
  2. vue2对于typeScript的支持非常有限,没有考虑到ts的集成。

vue3的出现就是为了解决vue2的弊端,其composition API很好的解决了逻辑复用的问题,而且vue3源码就是用ts写的,对ts的支持非常好。我们在开发项目过程中可以使用ts的加持,使代码更加健壮。

2.vue3的优点

  1. vue3支持vue2的大多数特性,实现对vue2的兼容
  2. vue3对比vue2具有明显的性能提升
    1. 打包大小减少41%
    2. 初次渲染快55%,更新快133%
    3. 内存使用减少54%
  3. vue3具有的composition API实现逻辑模块化和重用
  4. 增加了新特性,如Teleport组件,全局API的修改和优化等

3.响应式原理的不同

Vue2.x实现双向数据绑定原理,是通过es5的 Object.defineProperty,根据具体的key去读取和修改。其中的setter方法来实现数据劫持的,getter实现数据的修改。但是必须先知道想要拦截和修改的key是什么,所以vue2对于新增的属性无能为力,比如无法监听属性的添加和删除、数组索引和长度的变更,vue2的解决方法是使用Vue.set(object, propertyName, value) 等方法向嵌套对象添加响应式。

Vue3.x使用了ES2015的更快的原生proxy 替代 Object.defineProperty。Proxy可以理解成,在对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy可以直接监听对象而非属性,并返回一个新对象,具有更好的响应式支持

4.生命周期的不同

beforeCreate -> 请使用 setup()

created -> 请使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

如果要想在页面中使用生命周期函数,以往vue2的操作是直接在页面中写入生命周期,而vue3是需要去引用的,这就是为什么3能够将代码压缩到更低的原因

5.默认项目目录结构的不同

vue3移除了配置文件目录,config 和 build 文件夹,移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中,在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件

6.vue3对全局API的优化

在 Vue3 中,全局和内部 API 都经过了重构,并考虑到了 tree-shaking 的支持。因此,全局 API现在只能作为 ES 模块构建的命名导出进行访问。

import { nextTick } from 'vue'
nextTick(() => {
  // 一些和DOM有关的东西
})

入口文件

// vue2写法
// vue2全局配置的修改,会修改Vue对象的属性
// 在不同的app中,共享一份有着不同配置的Vue对象,也变得非常困难
import Vue from 'vue'
import App from './App.vue'
Vue.config.xx=xx
Vue.use(...)
Vue.mixin(...)

new Vue({
  render:h=>h(app)
}).$mount('#app')

// vue3写法
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(APP) // 创建一个app实例
app.config.xx=xx  // 在实例上修改配置,不会发生冲突
app.use(...)
app.mixin(...)
app.mount('#app')

7.使用Proxy替代了defineProperty

Proxy 相比于 defineProperty 的优势

Object.defineProperty() 的问题主要有三个:

  • 不能监听数组的变化
  • 必须遍历对象的每个属性
  • 必须深层遍历嵌套的对象

Proxy 在 ES2015 规范中被正式加入,它有以下几个特点:

  • 针对对象:针对整个对象,而不是对象的某个属性,所以也就不需要对 keys 进行遍历。这解决了上述 Object.defineProperty() 第二个问题
  • 支持数组:Proxy 不需要对数组的方法进行重载,省去了众多 hack,减少代码量等于减少了维护成本,而且标准的就是最好的。

除了上述两点之外,Proxy 还拥有以下优势:

  • Proxy 的第二个参数可以有 13 种拦截方法,这比起 Object.defineProperty() 要更加丰富
  • Proxy 作为新标准受到浏览器厂商的重点关注和性能优化,相比之下 Object.defineProperty() 是一个已有的老方法。

8.更多资料

vue3源码
vue3官网

以上就是Vue3对比Vue2的优点总结的详细内容,更多关于Vue3对比Vue2的优点的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue2和vue3的v-if与v-for优先级对比学习

    Vue.js 中使用最多的两个指令就是 v-if 和 v-for ,因此我们可能会想要同时使用它们.虽然官方不建议这样做,但有时确实是必须的,我们来了解下他们的工作方式: 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时, v-for 会优先作用. 在 vue 3.x 中, v-if 总是优先于 v-for 生效. 对比学习 接下来我们通过一个简单的示例来感知下,假设我们想要实现一个极简的 todoList 效果: 我们有一个 todoList: const todoL

  • Vue2.x和Vue3.x的双向绑定原理详解

    双向的绑定的原理 通过Object.defineproperty()重新定义对象属性的set方法.get方法来实现的,从这个属性中取值时会触发get方法,改变这个属性时会触发set方法,所以我们只要将一些需要更新view的方法放在这里面就可以实现data更新view了,而view更新data其实可以通过事件监听实现 当视图上的数据发生改变时, data 中的数据也发生改变当 data 中的数据发生改变时,视图中的数据也发生改变 Object.defineProperty() Object.def

  • 稍微学一下Vue的数据响应式(Vue2及Vue3区别)

    什么是数据响应式 从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom. 换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改. 因此实现数据响应式有两个重点问题: 如何知道数据发生了变化? 如何知道数据变化后哪里需要修改? 对于第一个问题,如何知道数据发生了变化,Vue3 之前使用了 ES5 的一个 API Object.defineProperty Vue

  • Vue2.X和Vue3.0数据响应原理变化的区别

    defineProperty 定义对象的属性,只不过属性里的get和set实现了响应式. 常用: value属性值 get set writeable 是否可写 enumrable 可遍历 Vue从改变一个数据到发生改变的过程  Vue2.X数据响应原理 创建页面,实现延时2s修改对象的值. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>LearnVue

  • 浅谈vue2的$refs在vue3组合式API中的替代方法

    如果你有过vue2的项目开发经验,那么对$refs就很熟悉了.由于vue3的断崖式的升级,在vue3中如何使用$refs呢?想必有遇到过类似的问题,我也有一样的疑惑.通过搜索引擎和github,基本掌握如何使用$refs.在vue3中使用组合式API的函数ref来代替静态或者动态html元素的应用. 最近业余在学习vue3项目<蜡笔(Crayon)管理模板:Vue3 + Vuex4 + Ant Design2>开发,这两天迭代推进了一点,实现了chart图表组件,写文章的时候发现提交代码的co

  • Vue3对比Vue2的优点总结

    1.为什么要有vue3 我们使用vue2常常会遇到一些体验不太好的地方,比如: 随着功能的增长,需求的增加,复杂组件的代码越来越难以维护,逻辑混乱,虽然vue2也有一些复用的方法,但是都存在一定的弊端,比如我们常常用的Mixin,特别容易发生命名冲突,暴露出来的变量意图不是很明显,重用到其他组件容易冲突. vue2对于typeScript的支持非常有限,没有考虑到ts的集成. vue3的出现就是为了解决vue2的弊端,其composition API很好的解决了逻辑复用的问题,而且vue3源码就

  • vue3 与 vue2 优点对比汇总

    目录 优点1:diff算法的优化 优点2:hoistStatic 静态提升 优点3:cacheHandlers 事件侦听器缓存 优点4:ssr渲染 优点5:更好的Ts支持 优点6:Compostion API: 组合API/注入API 优点7:更先进的组件 优点8:自定义渲染API 优点9:按需编译,体积比vue2.x更小 优点10:支持多根节点组件 ​​​​​​摘要: Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了.比起通用软件的生命周期来这好像也没那么久,Vu

  • vue3和vue2中mixins的使用解析

    目录 前言 Vue2 1.封装的mixin方法 2.具体页面引用 abc.vue 3.具体页面使用 abc.vue vue3官方入口(个人建议,不要再mixin用setup) 一.封装mixin里面具有setup 具体步骤 二.不需要在mixin里面使用setup  (官方支持用法) 具体使用 前言 vue的mixins里面放公共的js方法,但是vue3之后使用方法还是有些改变,这里来罗列下他们的区别. Vue2 1.封装的mixin方法 export const homeSensors = {

  • 深入了解vue2与vue3的生命周期对比

    目录 周期对比 用法 总结 周期对比 vue2 vue3 beforeCreate setup created setup beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated activeted onActiveted deactiveted onDeactiveted beforeDestory onBeforeUnmount destoryed onUnmounte

  • vue3:vue2中protoType更改为config.globalProperties问题

    目录 protoType替换为config.globalProperties Vue3 vs Vue2 Vue3 的新组件 文件对比 全局 API protoType替换为config.globalProperties 原文地址 在main.js中: vue2 Vue.prototype.$verson = '1.0.0' 使用 this.$verson vue3 Vue.config.globalProperties.$verson = '1.0.0' 使用 <script setup lan

  • 由浅入深讲解vue2和vue3的区别

    目录 前言 vue2 vs vue3 对比 双向绑定更新 实例化 生命周期 获取props 数据和方法的定义 给父组件传值emit watchEffect 组件通信 注意 路由 总结 前言 vue2和vu3之前的区别,一直以来是面试必考题目,如何回答,回答的层次决定了面试者的对于vue2,3的理解,以及对于vue3目前稳定版本发展的方向的了解,即考察使用程度,又考察了学习能力,可以说是回答即可以很简单,也可以很不简单,这里需要注意的是面试官的面试程度,需要我们层层递进,由浅入深来回答,这样可以体

  • 使用Vue3进行数据绑定及显示列表数据

    目录 一.与 Vue2 对比 1. Vue3 新特性 2. Vue2.Vue3 响应原理对比 3.重写数组的方法,检测数组变更 4.直观感受 二.使用Vue3进行数据绑定示例 1.使用ref实现数据绑定 2.使用reactive实现数据绑定 三.写在最后 一.与 Vue2 对比 1. Vue3 新特性 数据响应重新实现( ES6 的 proxy 代替 Es5 的 Object.defineProperty ) 源码使用 ts 重写,更好的类型推导 虚拟 DOM 新算法(更快,更小) 提供了 co

  • vue3.0+vue-router+element-plus初实践

    Vue3中文文档 Vue3.0对比Vue2.x优势 框架内部做了大量的性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等. 新增的组合式API(即Composition API),更适合大型项目的编写方式. 对TypeScript支持更好,去掉this操作,更强大的类型推导. 初始化项目 安装@vue/cli npm install @vue/cli -g 或 yarn global add @vue/cli 创建项目 vue create 项目名 可以选择Vue3的

  • 用vite搭建vue3应用的实现方法

    一,安装 提示: VUE3.0目前还没有官方的翻译文档.但是已经有人翻译了.得到了尤雨溪大佬的点赞,这里附上网址https://v3.cn.vuejs.org/ 1.安装 cli 因为要使用 vue3 必须要求 cli 的版本比较高,必须要高于 4.5.X 所以没有安装的 cli 的就直接安装最新版就行了,已有的可以升级或者卸载后重新安装 最好是全局安装 //全局安装 npm install -g @vue/cli # OR yarn global add @vue/cli //全局卸载 npm

  • 手摸手教你实现Vue3 Reactivity

    目录 前言 开始 小小思考 代码实现 模仿 实现track 实现trigger 实现observe 实现computed 前言 Vue3的响应式基于Proxy,对比Vue2中使用的Object.definedProperty的方式,使用Proxy在新增的对象以及数组的拦截上都有很好的支持. Vue3的响应式是一个独立的系统,可以抽离出来使用,那他到底是如何实现的呢? 都知道有Getter和Setter,那Getter和Setter中分别都进行了哪些主要操作才能实现响应式呢? 哼哼,带着这些问题一

随机推荐