本文摘自PHP中文网,作者青灯夜游,侵删。
vue3.0新特性:1、节点打Tag;2、事件开缓存;3、响应式Proxy;4、Composition API;5、新增三个组件Fragment、Teleport(传送门)和Suspense;6、Tree Shaking等等。
本教程操作环境:windows10系统、vue3.0版、Dell G3电脑。
Vue3.0新特性
一、节点打Tag
静态节点
1 |
|
动态节点
1 |
|
vue3.0底层,会自动识别某个节点是否是动态的,如果是动态的会自动生成标识(不同的动态会有不同的标识对应,如内容文本的动态,或者id的动态),从而在每次更新dom时,直接跳过哪些静态的节点,直接定位到动态的节点,大大节省效率。
二、事件开缓存
一般为一个节点设置了监听时间,每次页面进行更新,就会重新生成新的监听函数,启用了cacheHandlers,就会在第一次更新的时候进行自动识别是否可以缓存,如果可以就进行缓存,这样页面更新就不需要重新生成,尤其是在组件上,极大地减少了子组件的不必要刷新和资源消耗。
三、响应式Proxy
Proxy(vue3.0) vs Object.defineProperty (vue2.0)
1、Vue2.0响应式原理
响应化过程需要遍历data,props等,消耗较大
不支持Set/Map、class、数组等类型
新加或删除属性无法监听
数组响应化需要额外实现
对应的修改语法有限制
2、Vue3.0响应式原理:使用ES6的Proxy来解决这些问题。
通过Proxy代理,来拦截对data的一系列的操作。
四、Composition API
不要为了Composition而Composition
提高了代码质量的上限,但它也降低了下限
被定位为高级特性,因为它旨在解决的问题主要出现在大型应用程序中。
我们不打算彻底修改文档来把它用作默认方案。
相关推荐:《vue.js教程》
五、Teleport(传送门)
Modal、Dialog、Select、Dropdown…
六、Fragments
相关阅读 >>
更多相关阅读请进入《vue3.0》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者