尤雨溪在VueConf上关于Vue3生态进展的分享速览

8,885 阅读2分钟

今天观看了vueconf大会,第一时间跟大家分享一下尤大关于vue3生态的分享,官方ppt还没有拿到,大家先将就看。

数据

主要公布了devtools和vue3的npm下载量增长统计,其中devtools增长43%,npm下载增长51%。

可见增长势头之猛。

生态进展

  • vue-router4已稳定

  • vuex4已稳定

  • 组件库:quarsar,element-plus,ant design vue等,剩下俩忘了,其中只有antdv是正式版,其他处于beta状态,有小伙伴气愤移动端最强vant也是正式版竟然没被提及。

开发体验

  • 构建工具:没有悬念,尤大强力推荐vite

    • vite:主要介绍特性、插件机制和ssr进度

      image-20210522103140007

      关于脚手架vue-cli和vite之间关系,暂时并存,未来将会主推vite。

      image-20210522103448243

      推了一把VitePress,主要是开发体验好,有博客需求的朋友可以试试。

      image-20210522103642448

  • 开发体验改进

    • 改善SFC书写体验:主要是两个rfc,分别是setup scriptCSS style injection

      image-20210522103943981

    • setup script:主要简化SFC中使用Composition API体验,最终版把之前争议比较大的ref sugar去掉了。

      • 尤大演示了setup script能够如何帮助我们简化组件编写:

        <template>
        	<p>{{counter}}</p>
          <Comp></Comp>
        </template>
        <script setup>
        	import Comp from './Comp.vue'
          import {ref} from 'vue'
          const counter = ref(0)
        </script>
        
      • 推荐了一款体验页面:Vue SFC Playground

        image-20210522104818845

    • style动态变量注入:在style标签中使用响应式数据,很秀

      image-20210522104858926

      image-20210522105012189

  • devtools:同时支持两个版本,UI优化和性能调试,等vuex支持后会比较实用。

    image-20210522105140927

    image-20210522105243234

  • 更好的IDE/TS支持:Volar会是一个非常实用的工具,可以提供模板中的代码提示功能,可提供tsx相同体验,终于等到你!

    image-20210522105407731

  • vetur替代者

    image-20210522105521814

兼容性相关

  • IE11彻底被vue3抛弃

    image-20210522105744315

    vite+vue3默认现代模式,即输出目标ES6+,native ES modules;当然可以通过插件输出传统包。

    image-20210522105847463

  • Vue3迁移版:这是一个马甲版本,会是vue3.1的部分代码,披着vue3壳,实际是vue2内核,可以理解为用vue3编码方式写vue2!

    image-20210522105942454Vue3.2:下一个小版本,主要最终确定script setup等SFC特性、Suspense组件/async setup、性能、ssr等

    image-20210522110445614

  • vue2.7:内置composition api的vue2版本

    image-20210522110626867

    vue3迁移版就是vue2.7?

    image-20210522110658432

  • vue3将成为默认版本:vue2将在2021年Q2成为过去时,默认将安装v3

    image-20210522110810891