网站地图    收藏   

主页 > php专栏 > php图像处理 >

Vue3对比Vue2的优点总结

来源:未知    时间:2023-02-15 10:59 作者:小飞侠 阅读:

[导读] Vue3对比Vue2的优点总结 更新时间:2021年06月01日 11:50:09 作者:小蝉儿 vue3解决了vue2的一些缺陷与弊端,学习新的技术是很有必要的,本文总结了一些vue3的优点,希望各位能尽快转入vu...

Vue3对比Vue2的优点总结

 更新时间:2021年06月01日 11:50:09   作者:小蝉儿  

vue3解决了vue2的一些缺陷与弊端,学习新的技术是很有必要的,本文总结了一些vue3的优点,希望各位能尽快转入vue3的使用中

目录

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官网



自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论