上一节我们结合代码和文档,详细介绍了Global Config,下面我们详细来看看Global API。
Global API
OK,结合官方文档和代码细节,我们来看看这些 Global API 的具体用法:
-
Vue.set(object, key, value)
文档说明:
- 参数:
{Object} object
{string} key
{any} value
- 返回值:设置的值(从代码细节中看,这个描述不是很严谨)
- 用法:
设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
源码定义在 'src/core/observer/index.js' 文件中,基本逻辑为:
- 如果object是数组,将value插入到key对应的位置,直接返回value
- 如果object对象自身含有key属性,将该属性值更新为vlaue。然后返回
- 如果object是Vue实例对象,或者是Vue实例对象的根数据对象,给出警告信息(开发模式)然后直接返回,不做处理
- 如果object没有被追踪(observed),则为object增加或修改key属性,之后返回
- 如果不是以上情况,则为object增加响应式属性,并触发视图更新。返回value。(这部分涉及到Vue的响应式设计原理,后续会深入研究)
- 参数:
-
Vue.delete(object, key)
文档说明:
- 参数:
{Object} object
{string} key
- 用法:
删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是你应该很少会使用它。
注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象
源码定义在 'src/core/observer/index.js' 文件中,基本逻辑为:
- 如果object是Vue实例对象,或者是Vue实例对象的根数据对象,给出警告信息(开发模式)然后直接返回,不做处理
- 如果object对象自身没有key属性,直接返回不做处理
- 如果不是以上情况,直接删除object的key属性。如果object没有被追踪(observed),则直接返回,否则触发视图更新。
- 参数:
-
Vue.nextTick([callback, context])
文档说明:
- 参数:
{Function} [callback]
{Object} [context]
- 用法:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
这里涉及到Vue的异步更新队列,后续会深入研究。
源码定义在 'src/core/util/env.js' 文件中,使用闭包和立即执行函数返回一个 queueNextTick 函数,从而实现了一个异步队列机制。
代码看似复杂,其实本质上就是以异步队列的方式,使用给定上下文context来执行callback函数。 - 参数:
-
Vue.use(plugin)
文档说明:
- 参数:
{Object | Function} plugin
- 用法:
安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。
当 install 方法被同一个插件多次调用,插件将只会被安装一次。
源码定义在 'src/core/global-api/use.js' 文件中,基本逻辑为:
- 如果plugin已经安装(通过plugin的installed属性),则直接返回,不做处理
- 如果plugin.install是一个函数,则执行plugin.install(传入的plugin为对象)。否则直接执行plugin(传入的plugin为函数)。
- 将plugin的installed属性设置为true
- 参数:
-
Vue.mixin(mixin)
文档说明:
- 参数:
{Object} mixin
- 用法:
全局注册一个混合,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混合,向组件注入自定义的行为。
不推荐在应用代码中使用。
源码定义在 'src/core/global-api/mixin.js' 文件中,代码非常简短,就是要向Vue.options合并其他选项。
具体是通过调用 mergeOptions 函数实现的,有关的信息曾经在 Global Config 的 Vue.config.optionMergeStrategies 部分介绍过。 - 参数:
-
Vue.extend(options)
文档说明:
- 参数:
{Object} options
- 用法:
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数。(关于为何data必须是函数,可以在Vue预定义的属性合并策路中找到。 'src/core/util/options.js' 文件中 'strats.data' 的定义。其它有关属性合并策略的信息,请参考 Global Config 的 Vue.config.optionMergeStrategies 部分)
源码定义在 'src/core/global-api/extend.js' 文件中,基本逻辑为:
- 处理cid相关
- 判断options中的name,只可包含数字,字母和连接符-
- 定义Super指向Vue构造器,使用构造器模式和原型继承模式构建一个Sub继承Super。
- 调用 mergeOptions 函数合并属性,并赋值给Sub。
- 将Super的全局函数(use,mixin,extend,component,directive,filter等)赋值给Sub。
- 在Sub中记录Super信息:
Sub['super']= Super; Sub['superOptions'] = Super.options;
。
- 参数:
-
Vue.component(id, [definition])
文档说明:
- 参数:
{string} id
{Function | Object} [definition]
- 用法:
注册或获取全局组件。注册还会自动使用给定的id设置组件的名称。
源码定义在 'src/core/global-api/assets.js' 文件中,基本逻辑为:
- 如果没有给定definition,执行读取操作。返回Vue.components[id]。
- 否则,判断给定id的值是否为保留字,是保留字的话,给出警告信息(开发模式下)。
- 如果在definition中没有给定name属性,则使用id作为name属性的值
- 默认调用Vue.extend,将definition包装为Vue组件,然后将该组件注册到Vue全局
- 返回包装过后的definition
- 参数:
-
Vue.directive(id, [definition])
文档说明:
- 参数:
{string} id
{Function | Object} [definition]
- 用法:
注册或获取全局指令。
源码定义在 'src/core/global-api/assets.js' 文件中,基本逻辑为:
- 如果没有给定definition,执行读取操作。返回Vue.directives[id]。
- 如果definition是一个函数,将definition包装为一个指令对象
- 然后将该指令注册到Vue全局,并返回包装过后的指令对象
- 参数:
-
Vue.filter(id, [definition])
文档说明:
- 参数:
{string} id
{Function} [definition]
- 用法:
注册或获取全局过滤器。
源码定义在 'src/core/global-api/assets.js' 文件中,基本逻辑为:
- 如果没有给定definition,执行读取操作。返回Vue.filters[id]。
- definition为一个函数,这里称为过滤器。将该过滤器注册到Vue全局,并返回该过滤器
- 参数: