Vue3.0学习手册-引子篇__Vue.js
发布于 4 年前 作者 banyungong 2181 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

简介

大家好呀,我是wangly19。一名在小厂写代码的前端工程师。随着一个月的时间对组件库的完善,在Vue3.0 的开发上也总结出了一些心得体会。写成了一篇文章,希望能够给大家的学习之路添砖加瓦。当前篇章为引子篇。

Vue开发手册系列

  • Vue开发手册-引子篇 查看
  • Vue开发手册-入门篇 查看

官方周边支持度

标题 版本
Vue next: 3.0.0-rc.5
Vue-Router next: 4.0.0-beta.4
Vuex next: 4.0.0-beta.4

快速查看依赖库版本

# npm命令
npm info <项目包名>

关于Vite

尤大在CompositionAPI落地后的一段时间都在开发的一款工具,它的功能和Snowpack 的作用原理相同。为解决Webpack 的编译慢,打包慢的痛点所折腾出来的工具。通过原生浏览器的Import Module 的原理来去请求对应模块中的代码。因此就巧妙避开了Webpack 需要将代码编译为一个开发环境的时间,所以在启动速度上来说几乎秒杀于Webpack 的速度,带来更好的体验。具体可以参考其官网中的一些介绍,和亲自上手体验。

分享下我个人的看法把,我个人是非常喜欢这个工具的,只是它现在并没有发布正式版,还处在一个RC版本当中,也就是最终测试版。预计应该是和Vue3配套一起发布的。可以说可能是下一个VueCli 。同样的,也是因为年轻,它的一些社区方案讨论和插件资源和Webpack 相比来说明显较为薄弱。只能等未来的生态环境足够的稳定后,那么就会变得非常流行起来的。它内置了Typescript 支持是非常棒的。在对一些测试项目,或者个人项目我都是优先使用Vite 作为项目的首选方案。在这里希望它能够越来越好,苦Webpack 久矣。

关于Typescript

Vue3.0的源码已经使用Typescript 重写了,所以在类型推导上面也做的非常的完善。在这里,对于使用Typescript我依旧是保持理性的状态去权衡的。不能盲目的因为别人使用Typescript而使用,我非常中意Vue3给原生JavaScript带来的一些IDE的小提示。在不使用Typescript的情况下,也能享受一些类型推导带来的福利。使用Typescript能够带来更健壮的项目工程,更加完善的变量类型特性,但同时带来的是项目周期的延长,代码量的增加。利弊之间的权衡就需要通过一些因素来进行了。

所以说,在入门篇中,所有的代码案例都是以一个typescript 的形式来写示例的。如果不会typescript的同学其实也能够看得懂。

关于抄袭React

其实在compositionAPI出来的时候,就引发了很多人的吐槽。大部分都是说学不动了和太像React。其实这些改变其实是必然存在的。不论是为解决mixins用户感知问题,还是Options API逻辑碎片问题,Typescript类型推导问题都指向了Vue会对API有一次大换血。

尤大也在《前端会客厅》中提到借鉴了React。但是抄袭的话说实在的有点言过其实了。毕竟Vue的卖点一直都是响应式的机制。在使用composiiton API的期间,我发现改动最大的还是响应式系统的东西,不仅解决了以前引用类型丢失响应式的痛点,就连Map,Set 等ES6新的数据结构也支持响应式,这一点就让我非常惊喜。

在模板编译的工作上,Diff上,也做了非常多的工作。当你深入composiiton API的时候,会发现其实不知不觉间,Vue又给你的项目做了更多的工作,但是显然,这个工作是无法被明面感知的。

Proxy问题

在Vue3更换Proxy来替代Object.defineProperty做响应式数据的拦截通知处理的时候,也正式宣布了对某些浏览器的态度。

IE:你们这么看我干什么?

大家都知道,IE浏览器对ES6的语法支持是非常抱歉的,甚至在11版本,也就是Windows10的内置IE来说,他依旧不支持一些ES6新特性和CSS3语法,常见的受害者有:FlexGridMinHeight等CSS3样式和findfilter,箭头函数() =>等常见的东西。

但是在中国,有很多企业依旧停留在上一个时代,其中大部分以政府医疗等老旧项目为主。

后话

引子篇作为文章的开头,其实也是我在使用composition API开发时候的一些感受,如果你学过React我想可以非常友好的进行过渡,因为有很好的函数式和hooks思想。

我个人最喜欢改变就是逻辑拆分和数据响应式的完善,我一直不是特别喜欢mixins的代码复用。我需要一直反复的去看,这个mixin到底混入了什么东西。最后甚至开了一个窗口专门来看这个mixin文档。

Vue3.0的数据响应式有了很大的提升,不需要在手动对一些引用类型进行$set$delete的操作了,甚至,支持了MapSet 等新的结构。那也意味着在一些方案的处理上,能够更加的平滑选择更多的解决方法,未来,也可以看到更多优秀的方案和技巧出现在社区当中。

每一次框架的更新换代都会造成大量的用户迭代。最近因为愁换工作,更新的有点慢,希望能在Vue3出来之前把进阶篇更新完。

推荐资料

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: wangly19 原文链接:https://juejin.im/post/6856433976513724424

回到顶部