阅读 1539

尤雨溪谈Vue3.0新特性直播后的个人理解

我个人对Vue3的体验感受是非常好的,RFC讨论新API的时候,我认为通过少量的API的学习成本,或许可以得到更好的体验。这是非常棒的事情,但在未发布之前我是仍然保持中立的,对于框架的更新改版我的理解就是:解决前代被人吐槽的地方,优化性能,缩小体积,更强大的功能。通过这次直播,我来总结下Composition APIOptions API之间究竟解决了什么问题,以及Vue更新换代解决了哪些槽点。

按需引入

按照大佬的说法,Vue CompositionAPI支持按需引入,众所周知在Vue2 Options API中,它将其所有的功能都融会贯通起来,通过官方的Vue3在线编译器。可以看出,在Vue3中,会动态的去对模板引擎做一个按需引入。 如原始模板:

<div>
  <span>hello, vue 3</span>
</div>
复制代码

转换后:

import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("span", null, "hello, vue 3")
  ]))
}

// Check the console for the AST
复制代码

可以看到, import 中导入了模板引擎基本的东西

createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock
复制代码

在直播中也是提到了这一点。附上最新的模板编译网站:vue-next-template-explorer.netlify.app,大大的优化了项目打包后的一些代码。

更好的TypeScript支持

在2019年 ~ 2020年中,大量的库使用TS重构,代表的有,AntV G6 & Vue。重构后性能都有显著的提升和好的类型支持,无疑是一个好的方向,同时Npm也被微软收购,以为微软体系下就有Github, Npm,Typescript等热门的前端体系,所以2020年如果没有学习TS的朋友可以动身了。不然,如同jQuery一样,可能会成为时代的弄潮。

JavaScript不会被typeScript替换,但是开发者可能会。

Fragment碎片

在React中,有一个React.Fragments,起作用就是说在一个组件返回多个元素,意味着组件下根节点不只一个。但是在Vue2中template 和 render都需要一个根节点,不然会提示报错,很多时候不得不去多套一层。在Vue3中,尤大提到了Fragment碎片化,意味着template也支持多个节点。而不在是单一树了。

CompositionAPI & Mixin

Mixin在Vue中,我使用的场景很少,不是说没用。而是我很少去用它,虽然它看起来非常的优雅可以减少很多代码。但它确实有一个非常不友好的地方就是。我不清楚该页面中变量到底混入了什么。虽然它是可控的。而尤大昨天也提到了这个问题。所以我对Vue3充满了期待。因为我可以抛弃Mixin这个在Vue上存在感相对低的功能,虽然在大多数人眼里它很强大。

逻辑拆分和属性拆分

尤大提到了一个很重要的概念,setup逻辑拆分。在Vue2中,我们写的组件有时候会很长,不是不想拆分,而是不因为代码长而拆分。它就是一两个简单的业务逻辑。但是这个逻辑很长,有很多的methods, computd, data,生命周期。大家都有体会到,我的鼠标已经脱色了。一个逻辑看起来非常的混乱,随着业务逻辑增加,methods等属性内容的迭代,相当于你的逻辑代码以及变得脱节了,越来越难寻找去串联逻辑。这是非常糟糕的一件事情,意味着我修改逻辑我需要反复的去进行滚动。

this & context

在vue2属性中,对于this非常常见,因为你不得不去通过this.xxx 获取和设置,虽然一些优雅的方式,如:

methods: {
	saveAvtion() {
    const { name, age, action } = this
    console.log(name, age, action(name, age))
    /** end */
  }
}
复制代码

虽然通过上面的写法有一定的改善,但大部分this还是需要去写的。往往需要去关注this的指向,如this.$http的时候,this获取会发生改变?这就需要开发者去注意,而在setup函数中采用函数编程,可以减少一些this的编写。

配套服务

虽然Vue3.0 beta版本已经发布,但是正式生产环境还是需要等待一些组件库,Router,Vuex,周边等配套环境同步起来,根据尤大的直播说,预计在年中可以使用上,时间上还是挺快的。

总结

不得不说更新还是比较期待的,能够获得

  • 更好的类型提示
  • 更小的体积
  • 更好的加载速度
  • 更友好的代码阅读
  • ......

结合自己Vue2的一些槽点有感,感谢尤大的科普。谁能推荐下哪款护法水好啊,尤大发际线都高了。