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 ConfigVue.config.optionMergeStrategies 部分介绍过。

  • Vue.extend(options)

    文档说明:

    • 参数:
      • {Object} options
    • 用法:
      使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
      data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数。(关于为何data必须是函数,可以在Vue预定义的属性合并策路中找到。 'src/core/util/options.js' 文件中 'strats.data' 的定义。其它有关属性合并策略的信息,请参考 Global ConfigVue.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全局,并返回该过滤器
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容