Vue2和Vue3对比总结梳理

6,189 阅读3分钟

vue2.0核心思想

  • Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动、组件系统。
数据驱动:
  • Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: gettersetter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。
    watcher
  • watcher:每一个指令都会有一个对应的用来观测数据的对象,叫做watcher,比如v-text="msg", {{ msg }},即为两个watcherwatcher对象中包含了待渲染的关联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文件后缀形成单文件组件格式,方便项目架构和开发引用。配以完善的中文文档,这简直太友善了,符合国内大多数前端开发的使用习惯。
Vue2.0的缺点是他的敌人比他更加优秀。
  • 性能比react低。(低在dom渲染上,低在watcher的监听不如react设计得高效)
  • 打包文件没有react轻简。
  • 对未来必然流行的TS没有react支持得好
  • 等等等各方面都开始被react领跑,这就是为啥尤一要开发3.0的原因。

Vue3.0的核心思想

对比vue2.0的区别
  • 1、性能更比Vue 2.0强。
  • 2、打包更科学不再打包没用到的模块
  • 3、Composition API(组合API)
  • 4、Fragment, Teleport, Suspense
  • 5、更友好的支持兼容TS
  • 6、Custom Renderer API(自定义渲染API)

我会挑几个讲一下,反正都是只知皮毛,各位可以自行深度学习。

Composition API

Fragment(碎片)

  • 你不用再必须用一个template标签包起整个组件,一个文本一个标签,多个tempate都可以。

Teleport(传送门)

  • 对标的是React的 Portal,有兴趣的可以去了解一下。
    www.jianshu.com/p/16d5cf2e4…
  • 但因为Chrome有个提案,会增加一个名为Portal的原生element,为避免命名冲突,改为Teleport
  • 想知道什么是teleport的可以查看这个文章,我选出来的比较浅显易懂的。www.jianshu.com/p/1ecf5006b…

Suspense(悬念)

  • 可在嵌套层级中等待嵌套的异步依赖项
  • 支持async setup()
  • 支持异步组件

Custom Renderer API

  • 正在进行NativeScript Vue集成
  • 用户可以尝试WebGL自定义渲染器,与普通Vue应用程序一起使用(Vugel)。