Vue3.0版本强势升级点特性详解

目录
  • 一、Composition API: 组合API/注入API
  • 二、自定义渲染API(Custom Renderer API)
    • vue2.x架构问题
  • 三、更先进的组件
    • Fragment组件
    • Suspense组件
  • 四、更好的TS支持
  • 五、更快的开发体验(vite开发构建工具)
  • 六、按需编译,体积比Vue2.x更小(Tree shaking)
  • 七、性能比2.x快1.2~2倍
    • diff算法的优化
    • render阶段的静态提升(render阶段指生成虚拟dom树的阶段)
    • 事件侦听缓存
    • 减少创建组件实例的开销
  • 总结:

一、Composition API: 组合API/注入API

Vue3.0在架构上相比vue2.x做了升级,性能上得到了很大的提升,Composition API的出现,让组件抽离、逻辑代码复用更加灵活。

这里要说到代码的组织方式,传统的网页是html/css/javascript(结构/样式/逻辑)分离。vue/react通过组件化的方式,将联系紧密的结构/样式/逻辑放在一起,有利于代码的维护。

Composition api更进一步,着力于JavaScript(逻辑)部分,将逻辑相关的代码放在一起,近而有利于代码的维护。

在vue2的组件内,使用的是Option API风格(data/methods/mounted)来组织的代码,这样会让逻辑分散,举个例子就是我们完成一个计数器功能,要在data里声明变量,在methods定义响应函数,在mounted里初始化变量,如果在一个功能比较多、代码量比较大的组件里,你要维护这样一个功能,就需要在data/methods/mounted反复的切换到对应位置,然后进行代码的更改。

在vue3中,使用setup函数。如下所示跟count相关的逻辑,都放到counter.js文件里,跟todo相关的逻辑放到todos.js里。

import useCounter from './counter'
import useTodo from './todos'
setup(){
  let { val, todos, addTodo } = useTodo()
  let {count,add} = useCounter()
  return {
    val, todos, addTodo,
    count,add,
  }
}

在我看来这就是Composition API最大的特点,以功能为单位的代码组织方式。同时它可以让代码更易重用

说到重用,Composition API的方式也比mixin的方式好很多,你可以清楚的看到组件使用的数据和方法来自哪个模块,而mixin进组件的功能,常常会让我们困惑此功能来自哪个mixin

二、自定义渲染API(Custom Renderer API)

vue2.x架构问题

vue2.x最开始支持运行在浏览器中,渲染到浏览器的dom上,随着vue的流行,出现了weexmyvue

  • weex:移动端跨平台方案,需要渲染到移动设备。weex被写在vue原项目里,缺点是这使vue原项目更大了,也不是通用解决方案。
  • myvue:小程序上使用,需要渲染到小程序框架上。myvue是单独fork一份源代码进行更改,缺点也非常明显,myvue中vue的版本跟官方版本从fork的那一刻开始,就要开始不一致了。

vue2.x项目架构对于这种渲染到不同平台不太友好,vue3.0推出了自定义渲染API解决了该问题。

下面我们先看vue2和vue3的入口写法有所不同:

// vue2
import Vue from 'vue'
import App from './App.vue'
new Vue({ => h(App)}).$mount('#app')
// vue3
const { createApp }  from 'vue'
import App from "./src/App"
createApp(App).mount(('#app')

vue官方实现的 createApp 会给我们的 template 映射生成 html 代码,但是要是你不想渲染生成到 html ,而是要渲染生成到 canvas 之类的不是html的代码的时候,那就需要用到 Custom Renderer API 来定义自己的 render 渲染生成函数了。

// 你自己实现一个createApp,比如是渲染到canvas的。
import { createApp } from "./runtime-render";
import App from "./src/App"; // 根组件
createApp(App).mount('#app');

有了Custom Renderer API,如weexmyvue这类方案的问题就得到了完美解决。只需重写createApp即可。

三、更先进的组件

Fragment组件

vue2是不允许这样写的,组件必须有一个跟节点,现在可以这样写,vue将为我们创建一个虚拟的Fragment节点。

<template>
  <div>Hello</div>
  <div>World</div>
</template>

这样写有何好处呢?一是如果根节点不是必要的,无需创建了,减少了节点数。二是Fragment节点是虚拟的,不会DOM树中呈现。

Suspense组件

<Suspense>
  <template >
    <Suspended-component />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

在Suspended-component完全渲染之前,备用内容会被显示出来。如果是异步组件,Suspense可以等待组件被下载,或者在设置函数中执行一些异步操作。

四、更好的TS支持

vue2不适合使用ts,原因在于vue2的Option API风格。options是个简单对象,而ts是一种类型系统、面向对象的语法。两者有点不匹配。

在vue2结合ts的具体实践中,要用 vue-class-component 强化 vue 组件,让 Script 支持 TypeScript 装饰器,用 vue-property-decorator 来增加更多结合 Vue 特性的装饰器,最终搞的ts的组件写法和js的组件写法差别挺大。

在vue3中,量身打造了defineComponent函数,使组件在ts下,更好的利用参数类型推断 。Composition API 代码风格中,比较有代表性的api就是 refreactive,也很好的支持了类型声明。

import { defineComponent, ref } from 'vue'
const Component = defineComponent({
    props: {
        success: { type: String },
        student: {
          type: Object as PropType&lt;Student&gt;,
          required: true
       }
    },
    setup() {
      const year = ref(2020)
      const month = ref&lt;string | number&gt;('9')
      month.value = 9 // OK
     const result = year.value.split('') // =&gt; Property 'split' does not exist on type 'number'
 });

五、更快的开发体验(vite开发构建工具)

在使用webpack作为开发构建工具时,npm run dev都要等一会,项目越大等的时间越长。热重载页有几秒的延迟,但是如果用vite来做vue3的开发构建工具,npm run dev 秒开,热重载也很快。这种开发体验真是很爽,拒绝等待。

vite的原理还是用了浏览器支持import关键字了,启动项目不用webpack构建工具先构建了,浏览器直接请求路由对应的代码文件,代理服务器针对单个文件进行编译并返回。如果请求的文件里还import了其他文件,同理浏览器继续发请求,代理服务器返回。就这样实现了npm run dev时无需编译,实时请求实时编译。

六、按需编译,体积比Vue2.x更小(Tree shaking)

在vue3中,可以如下面这样引用vue的功能函数,如果你的项目没有用到watch,那编译时就会把tree shaking掉。

import { computed, watch, nextTick } from "vue";

利用的就是 ES6 模块系统import/export

七、性能比2.x快1.2~2倍

diff算法的优化

在vue2中,虚拟dom是全量比较的。

在vue3中,增加了静态标记PatchFlag。在创建vnode的时候,会根据vnode的内容是否可以变化,为其添加静态标记PatchFlag。diff的时候,只会比较有PatchFlag的节点。 PatchFlag是有类型的,比如一个可变化文本节点,会将其添加PatchFlag枚举值为TEXT的静态标记。这样在diff的时候,只需比对文本内容。需要比对的内容更少了。PatchFlag还有动态class、动态style、动态属性、动态key属性等枚举值。

render阶段的静态提升(render阶段指生成虚拟dom树的阶段)

在vue2中,一旦检查到数据变化,就会re-render组件,所有的vnode都会重新创建一遍,形成新的vdom树

在vue3中,对于不参与更新的vnode,会做静态提升,只会被创建一次,在re-render时直接复用。

静态提升可以理解为第一次render不参与更新的vnode节点的时候,保存它们的引用。re-render新vdom树时,直接拿它们的引用过来即可,无需重新创建。

事件侦听缓存

在vue2中,我们写的@click="onClick"也是被当作动态属性,diff的时候也要对比。但我们知道它不会变化,比如变成@click="onClick2",绑定别的值。

在vue3中,如果事件是不会变化的,会将onClick缓存起来(跟静态提升达到的效果类似),该节点也不会被标记上PatchFlag(也就是无需更新的节点)。这样在renderdiff两个阶段,事件侦听属性都节约了不必要的性能消耗。

我曾经维护过一个拥有很庞大dom树的页面。由于节点非常多,无需参与更新的节点也很多,使用vue2的情况下,在render和diff两个阶段,消费了很多性能,如果当时有vue3的话,我想性能会被优化很多。

减少创建组件实例的开销

vue2.x每创建一个实例,在this上要暴露data、props、computed这些,都是靠Object.defineProperty去定义的。这部分操作还是挺费时的。

vue3.0中基于Proxy,减少了创建组件实例的性能开销。

总结:

  • 其他的,数据监听方式变成了Proxy,消除了Object.defineProperty现有的限制(例如无法检测新的属性添加),并提供更好的性能。
  • vue3解决了vue2的一些问题,大型应用的性能问题、ts支持不友好问题,自定义渲染API解决体系架构存在的问题,如果在vue3的基础上实现weex框架会好很多。也做出了很多优化,Composition API让代码的组织形式更好。vite开发构建工具让开发体验更好,Tree shaking让包更小、性能更优。
  • 总的来说vue3还是非常棒,非常强大,带来了很多非常好的新特性。

以上就是Vue3.0版本强势升级点特性详解的详细内容,更多关于Vue3.0版本升级特性的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue3组件通信的方式总结及实例用法

    vue3组件通信方式为以下几种 props $emit $expose / ref $attrs v-model provide / inject Vuex mitt props <child :msg2="msg2" /> <script setup> const props = defineProps({ // 写法一 msg2:String // 写法二 msg2:{ type:String, default:'' } }) console.log(pro

  • vue3使用vue-router及路由权限拦截方式

    目录 使用vue-router及路由权限拦截 vue3使用vue-router讲解 使用vue-router及路由权限拦截 vue3 使用 vue-router 的方式和 vue2 基本一样,只不过初始化路由时需要用到一些函数来定义而已,另外 vue-cli 工具本身在创建 vue3 项目时就可以根据提示来进行安装配置 vue-router , 所以本篇只是针对那些忘记安装的小伙伴. 第一步肯定是要先安装啦: npm install vue-router@4 接着我们在根目录 src 下创建 r

  • vue3.0+vant3.0快速搭建项目的实现

    目录 一.项目的搭建 二.vue3体验+vant引入 2020年09月18日,vue.js 3.0正式发布,去网上看了看关于3.0的教程都不够完整,但其实vuecli最新版已经支持了vue3.0项目的快速搭建,这篇文章将带你了解一下vue3.0有哪些新的改变以及如何快速搭建vue3.0项目. 一.项目的搭建 1.首先,nodejs的安装不用我多说了吧,nodejs官网地址. 2.既然vuecli最新版已经可以快速搭建3.0了,那怎么升级到最新版呢?vue-cli官网地址,不知道vue-cli版本

  • Vue3全局挂载使用Axios学习实战

    目录 引言 一.全局挂载 二.全局使用 引言 在vue2中会习惯性的把axios挂载到全局,以方便在各个组件或页面中使用this.$http请求接口.但是在vue3中取消了Vue.prototype,在全局挂载方法和属性时,需要使用官方提供的globalPropertiesAPI. 一.全局挂载 在vue2项目中,入口文件main.js配置Vue.prototype挂载全局方法对象: import Vue from 'vue' import router from '@/router' impo

  • 快速掌握Vue3.0中如何上手Vuex状态管理

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的.确实是如此--如果您的应用够简单,您最好不要使用 Vuex.一个简单的 store 模式就足够您所需了.但是,如果您需要构建一个中大型

  • vue3.0+vite2实现动态异步组件懒加载

    创建一个vite项目 性能决定成败;vite确实快: cmd 命令行(默认你已经安装了node & npm),执行npm init @vitejs/app vue-study – --template vue: cd至vue-study,npm install(安装依赖); npm run dev(启动项目): 创建组件 新建一个目录为pages,pages下面再新建一个目录contents,contens下面可以新建具体的组件目录页面,此时目录结构为 App.vue <template&g

  • Vue3.0版本强势升级点特性详解

    目录 一.Composition API: 组合API/注入API 二.自定义渲染API(Custom Renderer API) vue2.x架构问题 三.更先进的组件 Fragment组件 Suspense组件 四.更好的TS支持 五.更快的开发体验(vite开发构建工具) 六.按需编译,体积比Vue2.x更小(Tree shaking) 七.性能比2.x快1.2-2倍 diff算法的优化 render阶段的静态提升(render阶段指生成虚拟dom树的阶段) 事件侦听缓存 减少创建组件实例

  • vue3.0中友好使用antdv示例详解

    前言 随着我们vue3.0的出现,我们的ui组件库也有了一些变化,像我们的旧版的element-ui已经不能在vue3.0中使用了,如果要使用element的话需要使用最新版的element-plus,由于发现它并不太好用,因此我选择了Ant Design Vue. 如果我们以前经常使用antd的话,我们使用起来这个上手会非常方便. 在vue3.0中引入我们的antdv 1.首先使用我们的vue/cli创建vue3.0项目并使用less 2. 在vue3.0中使用的话我们需要安装 ant-des

  • vue3.0翻牌数字组件使用方法详解

    本文实例为大家分享了vue3.0翻牌数字组件使用的具体代码,供大家参考,具体内容如下 代码 <template>   <div class="number-count-wrap" :class="numberSize">     <!-- 标题 start -->     <div class="number-title" :style="{'text-align': titleAlign}&q

  • Android5.0新特性详解之全新的动画

    在Material Design设计中,为用户与app交互反馈他们的动作行为和提供了视觉上的连贯性.Material主题为控件和Activity的过渡提供了一些默认的动画,在android L上,允许自定义这些动画: Touch feedback 触摸反馈 Circular Reveal 圆形展示 Curved motion 曲线运动 View state changes 视图状态变化 Vector Drawables 矢量图动画 Activity transitions 活动转场 触摸反馈 触

  • Nginx1.8.0版本平滑升级新版本1.9.7

    首先查看现在环境nginx的版本为1.8.0 编译的参数只指定了安装路径: 复制代码 代码如下: [root@localhost sbin]# ./nginx -V nginx version: nginx/1.8.0 built by gcc 4.4.7 20120313 (Red Hat 4.4.7-11) (GCC) configure arguments: --prefix=/usr/local/nginx 平滑升级步骤如下: 下载nginx1.9.7版本,解压并进入解压后的目录 复制代

  • C#9.0新特性详解——顶级程序语句(Top-Level Programs)

    1 背景与动机 通常,如果只想用C#在控制台上打印一行"Hello World!",这可不是Console.WriteLine("Hello World!");一条语句就可以搞定的,还涉及到其他必要基础代码(如定义类和入口函数Main),例如下面: using System; class Program { static void Main() { Console.WriteLine("Hello World!"); } } 就打印一句"

  • 简易版本JSON.stringify的实现及其六大特性详解

    目录 前言 JSON.stringify六大特性 特性一 特性二 特性三 特性四 特性五 特性六 手动实现stringify 总结 前言 JSON.stringify是一个使用非常高频的API,但是其却存在一个特性,我们在使用的过程中需要留意这些特性以避免为代码程序埋雷,那么接下来便一起动手实现一个简易版本的jsonStringify函数 JSON.stringify六大特性 特性一 布尔值.数字.字符串的包装对象在序列化过程中会自动转换成对应的原始值 现在有这么一个对象: const obj

  • MySql Installer 8.0.18可视化安装教程图文详解

    一.MySql 8.0.18安装 1.百度搜索windows for mysql 2.选择MySQL :: Download MySQL Installer 3.选择下载第二(mysql-installer-community-8.0.18.0.msi) 4.不用注册,直接开始下载 5.下载完成后鼠标右键安装 6.点击运行 7.勾选同意点击next 8.勾选Custom自定义,点击next 9.选择MySQL Servers >MySQL Server>MySQL Server 8.0.18

  • Python3.9新特性详解

    本文主要介绍Python3.9的一些新特性,如:更快速的进程释放,性能的提升,简便的新字符串函数,字典并集运算符以及更兼容稳定的内部API,详细如下: 字典并集和可迭代更新 字符串方法 类型提示 新的数学函数 新的解析器 IPv6范围内的地址 新模块:区域信息 其他语言更改 1.字典并集和可迭代更新 Python 3.9 dict类.如果有两个字典a和b,则现在可以使用这些运算符进行合并和更新. 我们有合并运算符|: 使用Iterables进行字典更新 | =运算符的另一个很棒的性能是能够使用可

  • Vue3和Electron实现桌面端应用详解

    目录 Vue CLI 搭建Vue项目 Vue项目改造为markdown编辑器 Vue CLI Plugin Electron Builder 优化功能 启动全屏显示 修改菜单栏 编辑器打开markdonw文件的内容 markdonw的内容存入文件 打包 为了方便记录一些个人随笔,我最近用Laravel和Vue 3.0撸了一个博客系统,其中使用到了一个基于markdown-it的 markdown 编辑器Vue组件v-md-editor.我感觉用它去编写markdown还是很方便的.后面就有了一个

随机推荐