Vue 类的定义

135 阅读1分钟

image.png

一、Vue 实际上是通过 Function 实现的类,所以只能通过 new 去实例化。
二、然后又定义五个 mixin 函数为 Vue 原型上增加一些属性方法。如下:
  • initMixin():增加 _init() 函数。
  • stateMixin():增加 $data,$props 属性,以及增加 $set()、$delete()、$watch() 函数。
  • eventsMixin():新增事件调度中心,方便后续的订阅发布模式。还新增了 $on()、$once()、$off()、$emit() 函数。
  • lifecycleMixin():新增组件渲染、生命周期相关的函数,如:_update()、$forceUpdate()、$destroy() 函数。
  • renderMixin():新增 _render()、$nextTick() 函数。
三、然后又通过 initGlobalAPI() 扩展了 Vue 类的静态属性/方法。如下:
  • 新增 Vue.util = {extend,mergeOptions,defineReactive} 静态属性,为工具函数。
  • 新增 Vue.config = {...,_lifecycleHooks:[beforeCreate,Created,...],...} 静态属性,还包含了生命周期钩子函数的名称数组(_lifecycleHooks)。
  • 新增 Vue.options = {} 静态属性,然后又为 Vue.options 扩展了三个属性:Vue.options.components、Vue.options.directives、Vue.options.filters 并且值都为空对象({})。且又定义了 Vue.options._base = Vue.
  • 最后又为 Vue.options.components 扩展定义了 KeepAlive 组件,同时定义了 KeepAlive 属性在 Vue.options.components 上。
  • 新增 Vue.set()、Vue.delete()、Vue.nextTick()、Vue.observable()、Vue.use()、Vue.mixin()、Vue.extend() 静态函数。
  • 最后又为 Vue 新增注册组件/指令/过滤器的静态函数。例如:Vue.component()、Vue.directive()、Vue.filter() 静态函数。
  • 最后新增了 Vue._installedPlugins 静态属性,表示 Vue 已安装的插件。
四、最后在全局又扩展了一些方法
  • 接着又定义了 vm.__patch__() 函数,最后在 Vue 的原型上定义 $mount() 函数。后因为平台环境影响又重写 $mount() 函数,同时新增 Vue.compile() 静态函数。