Vue3新特性
创始人
2024-05-24 06:55:01
0

1.RFC机制

        RFC机制是Vue团队开发的工作方式

        Vue的新语法或新功能的讨论,都会先在GitHub上征求意见,邀请社区所有人一起讨论,任何人都可以围观,参与讨论和尝试实现。

2.响应式系统

      Vue2响应式机制是基于Object.defineProperty()这个API实现的,Vue3还使用了Proxy,两者看起来都是都是对数据的读写进行拦截。

        defineProperty是拦截某个属性,对不存在的属性无法拦截,所以Vue2中所有数据必须要在data中声明,并且对数组长度的修改无法实现拦截。

        Proxy这个API就是真正的代理,Proxy是拦截整个obj对象,对于obj具体是啥属性,则不关心统一进行拦截。而且Proxy还监听了更多的数据格式,如Set、Map,这是Vue2所不到的。

3.自定义渲染器

        Vue2中所有模块是揉在一起的,这样做会导致不好扩展的问题,Vue3以拆包的方式,使用monorepo管理方式,响应式、编译和运行时全部独立了。Vue2中的响应式只服务于Vue,而Vue3的响应式就和Vue解耦了,甚至可以在Node.js和React中使用响应式。

        渲染的逻辑也拆成了平台无关渲染逻辑和浏览器渲染API。

        在这个框架下,Node的一些库,甚至React都可以依赖响应式。在任何时候,如果希望数据改变之后通知你,都可以单独的依赖Vue3响应式。

        Vue3由响应式、编译和运行时几部分组合在一起就是运行在浏览器端的Vue3,每个模块又都可以独立扩展出新的功能。

4.全模块使用TypeScript重构

        Vue2使用的类型系统是Flow.js,但是已经不更新了。

        Vue3选择了TypeScript,TypeScript官方也对使用TypeScript开发Vue3项目的团队有更加友好。

5.Composition API 组合语法(setup())

        使用Composition API后带来的好处:

        a. 所有API都是import引入的,对Tree-shaking很友好,没有用到的功能打包的时候会被清理掉,减小包的大小。

        b. 不用上下反复横跳,可以把一个功能的methods、data都放下一起书写,维护更轻松。

        c. 代码方便复用,可以把一个功能所有的methods、data封装在一个独立的函数里,复用代码非常容易。

        d. Composition API新增的return等语句,在实际项目中使用