专栏首页前端达人Vue 3.0将正式发布,它有哪些升级变化?

Vue 3.0将正式发布,它有哪些升级变化?

众所周知,vue3.0在去年开放了源码,并且今年将发出真正的可用于开发的版本。

那么我们今天就带着大家了解下 vue3.0,到底进化了什么,会对我们的开发有什么影响?

自身性能的变动

一、更快

带来更快的改动主要有两方面

1、vue3重新审视了 vdom,更改了自身对于 vdom的对比算法。vdom从之前的每次更新,都进行一次完整遍历对比,改为了切分区块树,来进行动态内容更新。也就是只更新 vdom的绑定了动态数据的部分,把速度提高了6倍;

2、 把 definePerproty改为了 proxy,对于 JavaScript引擎更加友好,响应更加高效。

二、更小

之前 vue的代码,只有一个 vue对象进来,所有的东西都在 vue上,这样的话其实所有你没用到的东西也没有办法扔掉,因为它们全都已经被添加到 vue这个全局对象上了。

vue3的话,一些不是每个应用都需要的功能,我们就做成了按需引入。用 ES module imports按需引入,举例来说,内置组件像 keep-alive、transition,指令的配合的运行时比如 v-model、v-for、帮助函数,各种工具函数。比如 async component、使用 mixins、或者是 memoize都可以做成按需引入。

写法上将发生的变动

一、加强了 typescript的支持,虽然我们在 vue2已经可以使用 typescript了,但是在vue3中,进一步加强了对 typescript的支持,很可能以后你就需要用 typescript来写 vue了;

二、改为使用函数式写法,如果你使用 Function-based API,那如下图所示:

我们可以看到,这里面的变化在于 watch、mounted等等生命周期,从属性变成了方法。除此之外我们可以直接把 watch、onMounted等作为了一个方法从 vue中拿出,如下面代码:

开发这样的做法好处之一,就是让我们可以更好地进行 tree-shaking,从侧面上帮助了我们更小的目标。

那么如果你的技术栈是 vue,我们应该怎么去补全,怎么去应对呢?

最好的学习方式,就是跟着大牛进行实战训练。

在这里推荐大家去看看网易云课堂的免费直播课程,听听网易特邀前端技术专家们对Vue的讲解。更有其他丰富的前端学习资料免费赠送,包括前端学习的技巧、源码、语法、架构等。

本文分享自微信公众号 - 前端达人(frontend84),作者:芝士来了

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从0到1,带你尝鲜Vue3.0

    做一个简单的Helloworld测试 我们就先试试原有的vue2 的Api还可不可以使用。

    前端达人
  • 「vue基础」Vue相关构建工具和基础插件简介

    像其他框架一样,Vue 的生态也有很多一系列的工具,通过工具,可以快速帮我们构建项目、发布项目、部署打包等,方便我们调试,避免不必要的Bug等。本篇文章我将重点...

    前端达人
  • JavaScript基础——深入学习async/await

    大家好,上周我们一起学习了《JavaScript基础——Promise使用指南》, 明白了ES6增加的新特性——Promise让我们能够更加优雅的书写回调函数,...

    前端达人
  • Vue 3.0将正式发布,它有哪些升级变化?

    那么我们今天就带着大家了解下 vue3.0,到底进化了什么,会对我们的开发有什么影响?

    ConardLi
  • Vue与React的区别之我见

    react和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。

    coder_koala
  • 百度前端实习岗

    牛客网
  • 使用 python 自动化分析 CrashDump

    本文介绍了一下自动化分析 CrashDump 的方法由于项目原因,需要批量分析CrashDump文件,正常的手动分析流程是:使用windbg载入CrashDum...

    腾讯玄武实验室
  • 第九次课:Python文件操作

      Python文件操作的方式有多种,这里学习两种,第一种是直接调用内置函数,无需引入模块;第二种就是引入os和shutil模块,这部分内容将在后续课程中介绍。...

    py3study
  • Python学习笔记(二)

    Python中一切皆对象,每一次赋值都是对象引用的传递,而部分类型是不可变引用,所以赋值时实际是创建了新对象,引用新对象。

    歪歪梯
  • vue3.0 Composition API 上手初体验 构建 vue 基础代码

    上一讲中,我们通过配置 webpack 构建了一个基础的开发环境。但是并没有涉及到 vue3.0 的内容,这一讲中,我们来构建一些基础代码。

    FungLeo

扫码关注云+社区

领取腾讯云代金券