前言
- 版本换代需要我们花更多的时间适应学习,但升级是为了更好,让你的前端项目更快更好更紧跟前端时代。
vue2.0核心思想
- Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动、组件系统。
数据驱动:
- Vue.js数据观测原理在技术实现上,利用的是
ES5Object.defineProperty
和存储器属性:getter
和setter
(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。
watcher -
watcher:每一个指令都会有一个对应的用来观测数据的对象,叫做
watcher
,比如v-text="msg", {{ msg }}
,即为两个watcher
,watcher
对象中包含了待渲染的关联DOM元素。
基于依赖收集的观测机制原理: - 1、将原生的数据改造成 “可观察对象”,通常为,调用
defineProperty
改变data
对象中数据为存储器属性。一个可观察对象可以被取值getter
,也可以被赋值setter
。 - 2 、在解析模板,也就是在
watcher
的求值过程中,每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者,并成为当前watcher的一个依赖。 - 3、当一个被依赖的可观察对象被赋值时,它会通知
notify
所有订阅自己的watcher
重新求值,并触发相应的更新,即watcher
对象中关联的DOM
改变渲染。
组件系统:
- 应用类UI可以看作全部是由组件树构成的。
核心选项 - 1、Template(模板)声明了数据和最终展现给用户的DOM之间的映射关系。
- 2、data(初始数据)
- 3、props(接受的外部参数)
- 4、methods(方法)
- 5、lifecycle hooks(生命周期钩子函数)
- 6、assets(私有资源)
最核心最优秀的来了
- vue2.0为何可以从ag、react中杀出来,因为vue2.0允许将模板、样式、逻辑三要素整合在同一个文件中,以.vue文件后缀形成单文件组件格式,方便项目架构和开发引用。配以完善的中文文档,这简直太友善了,符合国内大多数前端开发的使用习惯。
为何要升级呢?已经如此优秀了鸭?
- 答案是: 因为有react优秀在前,如果vue2.0不能跟上这个优秀的框架还固步自封的话,必将没落。
Vue2.0的缺点是他的敌人比他更加优秀。
- 性能比react低。(低在dom渲染上,低在watcher的监听不如react设计得高效)
- 打包文件没有react轻简。
- 对未来必然流行的TS没有react支持得好
- 等等等各方面都开始被react领跑,这就是为啥尤一要开发3.0的原因。
Vue3.0的核心思想
- 你们可以去看看B站的尤一的一手视频,免得被转换。英文不好的我给你们找好了对应翻译的帖子。
视频地址 https://www.bilibili.com/video/av837839066/
视频文字辅助 https://juejin.cn/post/6844904134303301645
对比vue2.0的区别
- 1、性能更比Vue 2.0强。
- 2、打包更科学不再打包没用到的模块
- 3、Composition API(组合API)
- 4、Fragment, Teleport, Suspense
- 5、更友好的支持兼容TS
- 6、Custom Renderer API(自定义渲染API)
我会挑几个讲一下,反正都是只知皮毛,各位可以自行深度学习。
Composition API
- 英文好的同学可以去瞅瞅 composition-api.vuejs.org/#summary
Fragment(碎片)
- 你不用再必须用一个template标签包起整个组件,一个文本一个标签,多个tempate都可以。
Teleport(传送门)
- 对标的是React的 Portal,有兴趣的可以去了解一下。
//www.greatytc.com/p/16d5cf2e48cf - 但因为Chrome有个提案,会增加一个名为Portal的原生element,为避免命名冲突,改为Teleport
- 想知道什么是teleport的可以查看这个文章,我选出来的比较浅显易懂的。//www.greatytc.com/p/1ecf5006b1ae
Suspense(悬念)
- 可在嵌套层级中等待嵌套的异步依赖项
- 支持
async setup()
- 支持异步组件
Custom Renderer API
- 正在进行
NativeScript Vue
集成 - 用户可以尝试
WebGL
自定义渲染器,与普通Vue应用程序一起使用(Vugel
)。
意味着以后可以通过 vue
, Dom
编程的方式来进行 webgl
编程 。感兴趣可以看这里:Getting started vugel
Vuex Router Cli
- Vuex: 都别慌,尤一说了,Vuex的下一个版本目前还放不出来,vue3.0以目前的API为主去适配,所以暂时不会改动很大。
- Router: 适应vue3的已经出来了,后续我也得去跟进学习下,项目里已经用了,但是改版的区别没仔细分析。
- Cli 很超前的做了vue3的工作,目前项目可以直接用cli创建,非常感谢这些团队给我们这些小白减低了很大的学习难度。