Vue.use()在new Vue() 之前使用的原因浅析

使用Vue前端框架开发有些时间了，官方文档对于插件开发也有详细的介绍。最近强迫症犯了，老在想为什么Vue.use函数执行，要在Vue实例化即new Vue(options)之前。解铃还须系铃人，这个问题只能通过看源码解决，于是。。。

先看Vue.use做了什么

Vue.use = function (plugin: Function | Object) {
  //Vue构造函数上定义_installedPlugins 避免相同的插件注册多次
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  // import是单例模式
  //所以plugin不论是Fuction还是Object同一个插件都是同一个
  if (installedPlugins.indexOf(plugin) > -1) {
   return this
  }

  // additional parameters
  const args = toArray(arguments, 1)
  // Vue作为第一个参数传递给插件
  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 // 返回的是this,可以链式调用
 }

do:

  1. 检查插件是否已经注册，相同的插件只注册一次
  2. 将Vue构造函数作为第一个参数，作为插件注册调用
  3. 根据插件形式选择调用plugin.install还是plugin
  4. 存储已注册插件，用于插件是否已注册检验
Vue.prototype._init中合并options
Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++
  let startTag, endTag
  ...
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
   )
   ...
   // 挂载到dom上
  if (vm.$options.el) {
   vm.$mount(vm.$options.el)
  }
}

在new Vue(options)时首先会执行this._init进行初始化，将Vue上的属性和options进行合并，然后在进行事件、生命周期等的初始化。beforeCreate,created生命周期的hook函数也是在这里进行调用

如果Vue.use在new Vue()之后执行，this._init()时你使用的插件的内容还没有添加到Vue.options.components、Vue.options.directives、Vue.options.filters等属性中。所以新初始化的Vue实例中也就没有插件内容

总结

以上所述是小编给大家介绍的Vue.use()在new Vue() 之前使用的原因浅析,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue源码之关于vm.$delete()/Vue.use()内部原理详解

    Vue源码之关于vm.$delete()/Vue.use()内部原理详解

    vm.$delete() vm.$delete用法见官网. 为什么需要Vue.delete()? 在ES6之前, JS没有提供方法来侦测到一个属性被删除了, 因此如果我们通过delete删除一个属性, Vue是侦测不到的, 因此不会触发数据响应式. 见下面的demo. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta na

  • 关于axios不能使用Vue.use()浅析

    关于axios不能使用Vue.use()浅析

    前言 最近在学习axios,在使用过程遇到了一些问题,觉着有必要给大家分享下,关于axios的基本知识大家可以参考这篇文章:axios基本入门用法教程 ,下面话不多说了,来一起看看详细的介绍吧. 问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter) . Vue.use(MintUI) .但是用 axios时,就不需要用 Vue.use(axios) ,就能直接使用.那这是为什么呐? 答案 因为 axios 没有 install. 什

  • 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件

    简介 Vue.use( plugin ):安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法.install 方法将被作为 Vue 的参数调用. 当 install 方法被同一个插件多次调用,插件将只会被安装一次. Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: MyPlugin.install = function (Vue, op

  • 浅谈vue.use()方法从源码到使用

    关于 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.$e

  • 在 Vue 中使用 JSX 及使用它的原因浅析

    本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. Vue.js 具有简单的 API 和几个选项,可用于在我们的组件中定义HTML模板. 我们可以使用 <template> 标签选项,在根组件实例上定义 template 属性,或者使用单文件组件. 上面的选项很棒并且可以完美地工作,但是,在您的应用程序的生命周期中,有时会

  • 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

    详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

    Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法,分享给大家,具体如下: 添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角Apply 提示重启webstorm 重启完成后 Setting-Editor-File and Code Templates 点击右上角的加号 添加vue文件 Name为vue File, Exte

  • 初识 Vue.js 中的 *.Vue文件

    初识 Vue.js 中的 *.Vue文件

    什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接.修改和扩大,构成所要求的系统.)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 什么是*.vue文件 首先,我们用 vue-cli

  • vue init webpack 建vue项目报错的解决方法

    使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

  • Vue面试题及Vue知识点整理

    看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题.(都是一些基础的vue面试题,大神不用浪费时间往下看) 一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数据模型转化成UI 展现出来

  • Vue注册组件命名时不能用大写的原因浅析

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得. 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的,因为大家都踩过大写命名的坑 下面我们来看个例子: <div id="app"> <myTemplate></myTemplate> </div> <script> Vue.component('myTemplate',{ tem

  • vue里的data要用return返回的原因浅析

    官网的示例 var vm = new Vue({ el: '#example', data: { message: 'Hello' } }); 项目中的写法 data() { return { message: 'Hello' } } 为什么要把data变成函数并return属性呢? 组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染. 将data封装成函数后,在实例化组件的时候,我们只是调用了data函数

  • Vue+Typescript中在Vue上挂载axios使用时报错问题

    在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.ts import Vue from 'vue' import axios from './utils/http' Vue.prototype.$axios = axios; 这样的话,我们在各个组件中进行请求时,就可以直接使用this.$axios,但是在ts中使用this.$axios进行请求时,会进行报错,如下所示: 从图中我们可以看出ts在Vue身上检测不到

  • Vue 3.0 前瞻Vue Function API新特性体验

    Vue 3.0 前瞻Vue Function API新特性体验

    最近 Vue 官方公布了 Vue 3.0 最重要的RFC:Function-based component API,并发布了兼容 Vue 2.0 版本的 plugin:vue-function-api,可用于提前体验 Vue 3.0 版本的 Function-based component API.笔者出于学习的目的,提前在项目中尝试了vue-function-api. 笔者计划写两篇文章,本文为笔者计划的第一篇,主要为笔者在体验 Vue Function API 的学习心得.第二篇计划写阅读v

  • Vue.use()在new Vue() 之前使用的原因浅析

    使用Vue前端框架开发有些时间了,官方文档对于插件开发也有详细的介绍.最近强迫症犯了,老在想为什么Vue.use函数执行,要在Vue实例化即new Vue(options)之前.解铃还须系铃人,这个问题只能通过看源码解决,于是... 先看Vue.use做了什么 Vue.use = function (plugin: Function | Object) { //Vue构造函数上定义_installedPlugins 避免相同的插件注册多次 const installedPlugins = (th

随机推荐