美文网首页
vue3.0的改进思路

vue3.0的改进思路

作者: cain07 | 来源:发表于2021-08-23 16:09 被阅读0次

vue3.0的改进思路

vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法,而3.0对这三部分都做了更改。

image

1. 响应式

2.x的响应式是基于Object.defineProperty实现的代理,兼容主流浏览器和ie9以上的ie浏览器,能够监听数据对象的变化,但是监听不到对象属性的增删数组元素和长度的变化,同时会在vue初始化的时候把所有的Observer都建立好,才能观察到数据对象属性的变化。

针对上面的问题,3.0进行了革命性的变更,采用了ES2015的Proxy来代替Object.defineProperty,可以做到监听对象属性的增删和数组元素和长度的修改,还可以监听Map、Set、WeakSet、WeakMap,同时还实现了惰性的监听,不会在初始化的时候创建所有的Observer,而是会在用到的时候才去监听。但是,虽然主流的浏览器都支持Proxy,ie系列却还是不兼容,所以针对ie11,vue3.0决定做单独的适配,暴露出来的api一样,但是底层实现还是Object.defineProperty,这样导致了ie11还是有2.x的问题。但是绝大部分情况下,3.0带来的好处已经能够体验到了。

响应式方面,vue3.0做了实现机制的变更,采用ES2015的Proxy,不但解决了vue2.x中的问题,还是得性能有了进一步提升。虽然有一些兼容问题,但是通过适配的方式解决掉了。此外,还暴露了observable的api来创建响应式对象,可以替代掉event bus,来做一些跨组件的通信。

2.模板

模板方面没有大的变更,只改了作用域插槽,2.x的机制导致作用域插槽变了,父组件会重新渲染,而3.0把作用于插槽改成了函数的方式,这样只会影响子组件的重新渲染,提升了渲染的性能。

同时,对于render函数的方面,vue3.0也会进行一系列更改来方便习惯直接使用api来生成vdom的开发者。

3. 对象式的组件声明方式

vue2.x中的组件是通过声明的方式传入一系列option,和TypeScript的结合需要通过一些装饰器的方式来做,虽然能实现功能,但是比较麻烦。

3.0修改了组件的声明方式,改成了类式的写法,这样使得和TypeScript的结合变得很容易。

此外,vue的源码也改用了TypeScript来写。其实当代码的功能复杂之后,必须有一个静态类型系统来做一些辅助管理,如React使用的Flow,Angular使用的TypeScript。现在vue3.0也全面改用TypeScript来重写了,更是使得对外暴露的api更容易结合TypeScript。静态类型系统对于复杂代码的维护确实很有必要。

其他的一些东西

vue3.0的改变是全面的,上面只涉及到主要的3个方面,还有一些其他的更改:

  • 支持自定义渲染器,从而使得weex可以通过自定义渲染器的方式来扩展,而不是直接fork源码来改的方式。
  • 支持Fragment(多个根节点)和Protal(在dom其他部分渲染组建内容)组件,针对一些特殊的场景做了处理。
  • 基于treeshaking优化,提供了更多的内置功能。

vue3.0的开发流程规划

vue的开发思路是公开的,尤雨溪说主要的特性会听取一些主要库的开发者的反馈,有比较确定的方案以后公布RFC收集公众的反馈意见,之后才进入开发,同时会同步生态内相关的库和工具的更新。

虽然vue不如react和angular那样有大公司维护,但是借助开源的力量,整个流程都是开源社区参与的,这样vue的稳定程度和开发思路自然也就不会有什么大的问题。

总结

vue3.0对vue的主要3个特点:响应式、模板、对象式的组件声明方式,进行了全面的更改,底层的实现和上层的api都有了明显的变化,基于Proxy重新实现了响应式,基于treeshaking内置了更多功能,提供了类式的组件声明方式。而且源码全部用typescript重写。以及进行了一系列的性能优化。

尤雨溪说,大概19年左右就可以见到vue3.0,非常期待这个全面改革的版本 。

相关文章

  • vue3.0的改进思路

    vue3.0的改进思路 vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法,而3.0对这三部分都做了...

  • 【vue3.0】vue3.0中监听路由router变化

    问题:vue3.0中的监听路由已经不能使用watch的方法 改进方式,使用onBeforeRouteUpdate ...

  • 多元分类:One-Versus-All(OVA)

    一对多算法 初始思路 改进思路 总结OVA优缺点

  • 自走棋改进思路

    玩了“多多自走棋”,刚玩一周时间。自走棋是一种很新颖的卡牌策略玩法,很喜欢,但它有些问题很要命,我希望它能改一改,...

  • APP收集

    思路1:聚合。新闻聚合今日头条。Ai Search搜索聚合。 思路2:把线下的搬到线上。KTV唱吧。 思路3:改进...

  • 用户标签系统改进思路

    近期在查看系统代码的时候,发现用户标签部分的设计后续实现按标签筛选用户功能时可能会有效率问题。想起以前有关bitm...

  • 朋友圈改进思路

    对于我来说,朋友圈生意才刚刚开始,可以说几乎是空白的,自己也仅仅试过几次水,发圈也还没有成为习惯,所以上来我就踩了...

  • Vue3.0入门指南

    第一章、走进Vue3.0 2-1、下载Vue3.0的单文件核心库 vue3.0 源码下载地址: https://u...

  • vue3.0你知道有哪些改进

    Vue3 采用了TS来编写 [支持 Composition API]http://caibaojian.com/v...

  • 全面改革:解读vue3.0的变化

    9月30日,尤雨溪在medium个人博客上发布了vue3.0的开发思路,国内有翻译的版本,见文章最后的参考链接。3...

网友评论

      本文标题:vue3.0的改进思路

      本文链接:https://www.haomeiwen.com/subject/evdrmltx.html