VueJS学习之旅 06

上一节我们结合代码和文档，详细介绍了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' 文件中，基本逻辑为：

  1. 如果object是数组，将value插入到key对应的位置，直接返回value
  2. 如果object对象自身含有key属性，将该属性值更新为vlaue。然后返回
  3. 如果object是Vue实例对象，或者是Vue实例对象的根数据对象，给出警告信息（开发模式）然后直接返回，不做处理
  4. 如果object没有被追踪（observed），则为object增加或修改key属性，之后返回
  5. 如果不是以上情况，则为object增加响应式属性，并触发视图更新。返回value。（这部分涉及到Vue的响应式设计原理，后续会深入研究）

• Vue.delete(object, key)

  文档说明：

  • 参数：
    • {Object} object
    • {string} key
  • 用法：
    删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。
    注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象

  源码定义在 'src/core/observer/index.js' 文件中，基本逻辑为：

  1. 如果object是Vue实例对象，或者是Vue实例对象的根数据对象，给出警告信息（开发模式）然后直接返回，不做处理
  2. 如果object对象自身没有key属性，直接返回不做处理
  3. 如果不是以上情况，直接删除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' 文件中，基本逻辑为：

  1. 如果plugin已经安装（通过plugin的installed属性），则直接返回，不做处理
  2. 如果plugin.install是一个函数，则执行plugin.install（传入的plugin为对象）。否则直接执行plugin（传入的plugin为函数）。
  3. 将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' 文件中，基本逻辑为：

  1. 处理cid相关
  2. 判断options中的name，只可包含数字，字母和连接符-
  3. 定义Super指向Vue构造器，使用构造器模式和原型继承模式构建一个Sub继承Super。
  4. 调用 mergeOptions 函数合并属性，并赋值给Sub。
  5. 将Super的全局函数（use，mixin，extend，component，directive，filter等）赋值给Sub。
  6. 在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' 文件中，基本逻辑为：

  1. 如果没有给定definition，执行读取操作。返回Vue.components[id]。
  2. 否则，判断给定id的值是否为保留字，是保留字的话，给出警告信息（开发模式下）。
  3. 如果在definition中没有给定name属性，则使用id作为name属性的值
  4. 默认调用Vue.extend，将definition包装为Vue组件，然后将该组件注册到Vue全局
  5. 返回包装过后的definition

• Vue.directive(id, [definition])

  文档说明：

  • 参数：
    • {string} id
    • {Function | Object} [definition]
  • 用法：
    注册或获取全局指令。

  源码定义在 'src/core/global-api/assets.js' 文件中，基本逻辑为：

  1. 如果没有给定definition，执行读取操作。返回Vue.directives[id]。
  2. 如果definition是一个函数，将definition包装为一个指令对象
  3. 然后将该指令注册到Vue全局，并返回包装过后的指令对象

• Vue.filter(id, [definition])

  文档说明：

  • 参数：
    • {string} id
    • {Function} [definition]
  • 用法：
    注册或获取全局过滤器。

  源码定义在 'src/core/global-api/assets.js' 文件中，基本逻辑为：

  1. 如果没有给定definition，执行读取操作。返回Vue.filters[id]。
  2. definition为一个函数，这里称为过滤器。将该过滤器注册到Vue全局，并返回该过滤器