метод vue.use() из источника для использования

Vuex

Что мы знаем о vue.use?

При разработке vue все должны быть в постоянном контактеVue.use()Метод, объяснение, данное на официальном сайте:через глобальный методVue.use()Используйте плагины; Я думаю, что более уместно понимать использование как регистрацию, сначала посмотрите на следующие распространенные сценарии регистрации.

import Router from 'vue-router'
Vue.use(Router)

import Vuex from 'vuex'
Vue.use(Vuex)

import Echarts from 'echarts'
Vue.prototype.$echarts = Echarts

Регистрация ечартов очень проста, она висит прямо на прототипе метода Vue, отношение наследования через цепочку прототипов может передаваться в любом компоненте.this.$echartsДоступ к экземпляру echarts, давайте напишем простой пример, чтобы доказать это.

function myVue(title){
  this.title = title
}
myVue.prototype.myUse = '在原型上添加公共属性'
const A = new myVue('我是实例A')
const B = new myVue('我是实例B')
console.log(A.title, B.title, A.myVue, B.myVue, )
// 我是实例A 我是实例B 在原型上添加公共属性 在原型上添加公共属性

И регистрацию Router и Vuex нужно анализироватьVue.use()Исходный код , прежде чем анализировать исходный код, обобщите официальныеVue.use()Описание метода:

  • через глобальный методVue.use()Используйте плагины
  • Vue.use автоматически предотвратит множественную регистрацию одного и того же плагина.
  • Это нужно сделать до того, как вы вызовете новый Vue() для запуска приложения.
  • Vue.use()Метод передает хотя бы один параметр. Тип параметра должен быть "Объект" или "Функция". Если это "Объект", то объект должен определить метод установки. Если это "Функция", то эта функция используется в качестве метода установки. существуетVue.use()При выполнении установка будет выполняться по умолчанию.При выполнении установки первым параметром является Vue, а остальные параметрыVue.use()Дополнительные параметры, переданные во время выполнения.

Официальный сайт говоритVue.use()Он используется для использования плагинов, тогда входящие Router и Vuex — это плагины, на которые здесь ссылаются, и этот плагин, по сути, является методом установки. Что касается логики, реализованной внутри метода install, то она определяется бизнесом самого плагина.

Анализ исходного кода

Прежде всего, давайте поговорим о Flow, этих странных способах записи в исходном коде vue.Vue.use = function (plugin: Function | Object)— это синтаксис Flow, инструмента статической проверки типов для JavaScript, разработанного Facebook. JavaScript — язык с динамической типизацией, и его гибкость очевидна для всех, но побочным эффектом слишком гибкости является то, что на нем легко писать очень скрытые и скрытые коды. во время выполнения может появиться странность.

Теперь мы официально приступаем к анализу исходного кода,Vue.use()Исходный код очень прост менее 30 строк, в первую очередь посмотреть на SRC / CORE / GLOBAL-API / USE.JS DOWNVue.use()Определение метода:

import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

Функция инструмента используется в приведенном выше исходном коде.toArray, функция определена в src/shared/util.js

export function toArray (list: any, start?: number): Array<any> {
  start = start || 0
  let i = list.length - start
  const ret: Array<any> = new Array(i)
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}

Понять, какую логику реализует исходный код

Vue.use = function (plugin: Function | Object) {
Метод использования определяется в глобальном API Vue, получение параметра плагина может быть либо функцией, либо объектом, что соответствует предыдущим официальным правилам.Vue.use()Ему соответствует тип, требуемый первым параметром.

if (installedPlugins.indexOf(plugin) > -1) {
Используется для определения того, был ли плагин уже зарегистрирован, чтобы предотвратить повторную регистрацию.

const args = toArray(arguments, 1)
аргументыVue.use()Список параметров метода представляет собой массив класса, а под константой сначала понимается следующая 1. Функция метода toArray заключается в перехвате первого параметра Array от индекса 1 до конца. также получилVue.use()У метода есть и другие параметры, кроме первого, которые нужно передать при вызове метода instll.

if (typeof plugin.install === 'function') {
} else if (typeof plugin === 'function') {
Оператор if здесь должен судитьVue.use()Первый передаваемый параметр — это объект или функция.

plugin.install.apply(plugin, args)
plugin.apply(null, args)
После оценки выполните соответствующий метод установки, используйте команду apply, чтобы изменить эту точку, и передайте оставшиеся параметры, полученные с помощью toArray.

installedPlugins.push(plugin)
Наконец, запишите, что компонент был зарегистрирован

Теперь мы находимVue.use()По сути, регистрация метода установки выполняет метод установки.Содержание в установке определяется самим разработчиком.Вообще говоря, хук может быть ближе к семантике.

Какая польза от Vue.use()

При установке мы можем получить Vue, после чего работа, связанная с Vue, может быть рассмотрена наVue.use()метод, например:

  • директивная регистрация
  • регистрация миксина
  • регистрация фильтров
  • регистрация компонентов
  • крепление прототипа
  • ...

графики зарегистрированы с помощью Vue.use()

main.js

import Vue from 'vue'
import echarts from './echarts.js'
Vue.use(echarts)

new Vue({
  ...
})

echarts.js

import Echarts from 'echarts'
export default {
  install(Vue){
    Vue.prototype.$echarts = Echarts
  }
}

Преимущество написания таким образом заключается в том, что в установочном файле можно выполнить больше работы по настройке, main.js не будет раздуваться, и им будет удобнее управлять.

Глобальные компоненты регистрируются с помощью Vue.use().

base.js

import a from './a'
import b from './b'
let components = { a, b }
const installBase = {
  install (Vue) {
    Object.keys(components).map(key => Vue.component(key, components[key]))
  }
}

main.js

import Vue from 'vue'
import base from './base.js'
Vue.use(base)

new Vue({
  ...
})
Категории