浅谈Vue3的几个优势

目录
  • 1、源码
    • 1.1 monorepo
    • 1.2 TypeScript
  • 2、性能
    • 2.1 优化源码体积
    • 2.3 Proxy
    • 2.4 Composition API

Vue2已经非常优秀，且具备完善的社区和生态，但是Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化

1、源码

1.1 monorepo

源码管理方式采用monorepo的方式进行管理，monorepo 把这些模块拆分到不同的 package 中，每个 package 有各自的 API、类型定义和测试。这样使得模块拆分更细化，职责划分更明确，模块之间的依赖关系也更加明确，开发人员也更容易阅读、理解和更改所有模块源码，提高代码的可维护性

1.2 TypeScript

Vue2时期选择的是flow，由于flow自身存在一些功能上的短板，且TS发展势头更好，Vue3选择使用TS编写代码，也可以更好的支持TS提升开发体验

2、性能

2.1 优化源码体积

主要从两个方面进行了源码体积优化：

移除一些冷门API，比如 filter、inline-template 等

API减少，必然会减少代码体积，这点非常容易理解

引入tree-shaking 减少打包体积

tree-shaking 依赖 ES2015 模块语法的静态结构（即 import 和 export），通过编译阶段的静态分析，找到没有引入的模块并打上标记，这个技术在webpack等打包工具上已经非常普及

在Vue3中的应用：我们大概率不会使用Vue提供的全部API，总会有一些冷门的、业务场景单一使用不到的API，那么在打包的过程中就可以将这些没有被用户使用的API移除，减少打包体积

2.3 Proxy

Vue2之前使用Object.defineProperty进行数据劫持

Object.defineProperty(source, key, {
  get(){
    // todo...
  },
  set(){
    // todo...
  }
})

其存在一些缺陷

  • 必须预先知道劫持的key是什么，并不能很好的监听到对象属性的添加、删除
  • 初始化时递归遍历整个data，导致深层嵌套数据结构造成性能负担，
  • Vue3使用Proxy进行数据劫持，可以很好的规避Object.defineProperty带来的缺陷
p = new Proxy(source, {
  get() {
    // todo...
  },
  set() {
    // todo...
  }
})

2.4 Composition API

Vue3 在语法方面进行了优化，主要是提供了 Composition API替换原本的Options API

Options API提供了 methods、computed、data、props以及各个阶段的生命钩子选项，开发者可以在每个API中做着对应的事情，各司其职，上手和理解成本非常低，对于新手开发者非常友好。使用其开发小型项目时代码的阅读性、维护性等也是可观的，但是当遇到大型项目或者较为复杂的业务逻辑时，代码将会变得非常难以维护，常常导致修改一个功能需要在代码中跳转多个地方，一个功能的代码分散在各个地方，造成阅读和理解成本直线增加，Composition API，它有一个很好的机制去解决这样的问题，就是将某个逻辑关注点相关的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去

到此这篇关于浅谈Vue3的几个优势的文章就介绍到这了,更多相关Vue3优势内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue2 vue3中使用Echarts详细

    vue2 vue3中使用Echarts详细

    目录 1.安装 2.vue2中使用Echarts 在main.js文件中 给定一个容器 3.vue3中使用Echarts 在根组件里引入echart,一般是App.vue 在需要使用的页面,定义div 然后在需要使用到Echarts的页面inject 1.安装 npm install echarts --save 2.vue2中使用Echarts 在main.js文件中 // 引入echarts import echarts from 'echarts' Vue.prototype.$echar

  • 简单聊聊vue3.0 sfc中setup的变化

    目录 前言 标准的sfc写法 script-setup 变量暴露 组件挂载 props 自定义事件 总结 前言 在vue中,sfc(单文件组件)指的是文件后缀名为.vue的特殊文件格式,它允许将 Vue 组件中的模板.逻辑 与 样式封装在单个文件中. 以下是一个基本的sfc <script> export default {   data() {     return {       greeting: 'Hello World!'     }   } } </script> &l

  • 全面总结Vue3.0的多种侦听方式

    目录 侦听器 一.wacthEffect 二.watch 1.1第一种方式侦听 1.2第二种方式侦听 1.3侦听多个数据源 总结 侦听器 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 一.wacthEffect 立即执行,没有immediate 侦听,watchEffect是立即执行的,没有immediate,不需要传递侦听的内

  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    目录 前言 侦听器和计算属性的区别 vue3如何使用watch呢? 基本使用 监听多个响应式数据 侦听reactive定义的响应式数据 监听reactive定义的响应式数据的某一个属性 配置选项用法 总结 前言 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 侦听器和计算属性的区别 计算属性里不可以做异步操作,侦听器可以做异步操作

  • 浅谈Vue3的几个优势

    目录 1.源码 1.1 monorepo 1.2 TypeScript 2.性能 2.1 优化源码体积 2.3 Proxy 2.4 Composition API Vue2已经非常优秀,且具备完善的社区和生态,但是Vue3仍然在源码.性能和语法 API 三个大的方面进行了优化 1.源码 1.1 monorepo 源码管理方式采用monorepo的方式进行管理,monorepo 把这些模块拆分到不同的 package 中,每个 package 有各自的 API.类型定义和测试.这样使得模块拆分更细

  • 浅谈vue3在项目中的逻辑抽离和字段显示

    目录 逻辑分层 将各个区域业务分开 这样做的优势 这样的场景应该如何处理 优化 reactive 不一定非要写在setup函数中 如何在页面上直接显示值 逻辑分层 我们在使用vue3开发项目的时候, 如何进行[区域分层]呢???? 举一个简单的小粒子 一个区域有[查询逻辑.修改后的保存逻辑.新增逻辑.删除逻辑] 这个页面可能还有其他的区域.A区域.B区域,C区域...[有很多逻辑] 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 export default { setup ()

  • 浅谈Vue3 Composition API如何替换Vue Mixins

    想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们,并使Vue应用程序具有更大的可伸缩性. 回顾Mixins功能 让我们快速回顾一下mixins模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位. 通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性--诸如 data,m

  • 浅谈Vue3.0新版API之composition-api入坑指南

    关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 composition-api解决了什么问题 语法糖介绍 vite的安装使用 vite仓库地址 https://github.com/vuejs/vite 上面有详细的安装使用教程,按照步骤安装即可 composition-api解决了什么问题 使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高

  • 浅谈Vue3 defineComponent有什么作用

    浅谈Vue3 defineComponent有什么作用

    目录 defineComponent重载函数 开发实践 defineComponent函数,只是对setup函数进行封装,返回options的对象: export function defineComponent(options: unknown) { return isFunction(options) ? { setup: options } : options } defineComponent最重要的是:在TypeScript下,给予了组件 正确的参数类型推断 . defineCompo

  • 浅谈Vue3中watchEffect的具体用法

    前言 watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数. 换句话说:watchEffect相当于将watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行.不同于 watch,watchEffect 的回调函数会被立即执行(即 { immediate: true }) 此文主要讲述怎样利用清除副作用使我们的代码更加优雅~ watchEffect的副作用 什么是副作用(side effect),简单的说副作用

  • 浅谈vue3中ref、toRef、toRefs 和 reactive的区别

    目录 一.ref——定义任意类型响应式数据 二.reactive——定义响应式对象 三.toRef——将一个 reactive 转化为一个 ref 四.toRefs——将多个 reactive 自动解构为多个 ref 一.ref——定义任意类型响应式数据 ref 能定义“任何类型”的响应式数据(ref 在 vue3 中指响应式数据). 参数可以传入任意数据类型. 使用 ref 定义的属性必须通过 .value 的形式才能修改其值.属性的值一旦被修改就会触发模板的重新渲染以显示最新的值. 对于在

  • 浅谈vue3中effect与computed的亲密关系

    在我刚看完vue3响应式的时候,心中就有一个不可磨灭的谜团,让我茶不思饭不想,总想生病.那么这个谜团是什么呢?就是在响应式中一直穿行在tranger跟track之间的effect.如果单纯的响应式原理根本就用不上effect,那么effect到底是干什么的呢? 船到桥头自然直,柳岸花明又一村.苦心人天不负,偶然间我看到了effect测试代码用例! it('should observe basic properties', () => { let dummy const counter = rea

  • 浅谈Vue3中key的作用和工作原理

    浅谈Vue3中key的作用和工作原理

    这个key属性有什么作用呢?我们先来看一下官方的解释: kekey属性主要用在Vue的虚拟DOM diff算法中,在新旧nodes对比时辨识Vnodes: 如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法 而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除/销毁 key 不存在的元素. 先简单提一下我对VNode的理解: VNode的全称是Virtual Node,也就是虚拟节点: Vnode的本质是一个JavaScri

  • 浅谈Vue3 父子传值

    目录 父传子: 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 2.子组件依旧通过 props 来接收并且在模版中使用 子传父: 总结 父传子: 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 在这里为了大家区分我将父组件中的数据定义为 : fatherData  , 子组件需要接收的数据定义为: sonData . // 父组件 <template> <div class="a

随机推荐