关于Vue.use()详解

Posted 2023-05-11

参考技术A 相信很多人在用Vue使用别人的组件时，会用到 Vue.use() 。例如： Vue.use(VueRouter) 、 Vue.use(MintUI) 。但是用 axios 时，就不需要用 Vue.use(axios) ，就能直接使用。那这是为什么呐？

因为 axios 没有 install 。
什么意思呢？接下来我们自定义一个需要 Vue.use() 的组件，也就是有 install 的组件，看完之后就明白了。

这是当前项目目录：

1.创建如下图中的文件夹和文件

2.在 Loading.vue 中定义一个组件

3.在 index.js 中 引入 Loading.vue ，并导出

4.在 main.js 中引入 loading 文件下的 index

5.在App.vue里面写入定义好的组件标签 <Loading></Loading>

6.看到这儿大家应该就明白了吧，用 axios 时，之所以不需要用 Vue.use(axios) ，就能直接使用，是因为开发者在封装 axios 时，没有写 install 这一步。至于为啥没写，那就不得而知了。

下一篇 axios如何全局注册

023.整理几个面试题——关于Vue？

关于Vue？

网上收集整理

01. 【vue-loader】的作用是什么？

• 作用：一个基于Webpack的loader，可以解析和转换.vue文件

  • 能提取template、script、style标签中代码，并分别把他们交给对应的loader处理，然后转换为JS模块

02. 【Vue.use】是什么？

• vue.use 是用来使用插件的，我们可以在插件中扩展全局组件、指令、原型方法等

• Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，用于传入插件的配置

  在使用Vue.use()的时候，就会调用插件内部的install方法

  • 插件传入的如果是一个对象，则执行其install方法
  • 如果是一个函数，则执行它自身，并bind this为null，然后传入额外的参数

  MyPlugin.install = function (Vue, options) 
      // 1. 添加全局方法或属性
      Vue.myGlobalMethod = function () 
          // 逻辑...
      
      // 2. 添加全局资源
      Vue.directive('my-directive', 
          bind (el, binding, vnode, oldVnode) 
              // 逻辑...
          
          ...
      )
      // 3. 注入组件选项
      Vue.mixin(
          created: function () 
              // 逻辑...
          
          ...
      )
      // 4. 添加实例方法
      Vue.prototype.$myMethod = function (methodOptions) 
          // 逻辑...
      
      // 5. 注册全局组件
      Vue.component('myButton',
          // ...组件选项
      )
  
  
  // --------------
  Vue.use(MyPlugin, 
      // 参数
  )
  
  

03. Vue的两个核心点

• 数据驱动、组件系统
  • 数据驱动：ViewModel，保证数据和视图的一致性
  • 组件系统：应用类UI可以看作全部是由组件树构成的

04. vue 的生命周期

• 概念：每个 Vue 实例在被创建时都要经过一系列的初始化过程

• 作用：

  生命周期	描述
  beforeCreate	组件实例被创建之初，组件的属性生效之前
  created	组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
  beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
  mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
  beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
  update	组件数据更新之后
  activited	keep-alive 专属，组件被激活时调用
  deactivated	keep-alive 专属，组件被销毁时调用
  beforeDestory	组件销毁前调用
  destoryed	组件销毁后调用

05. 第一次页面加载会触发：

• beforeCreate、created、beforeMount、mounted

06. created和mounted的区别

• created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
• mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对页面HTML节点进行DOM操作

07. 获取数据在哪个周期函数?

• 可以在钩子函数 created、beforeMount、mounted 中进行调用
  • 因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值
• 但一般都在 created 钩子函数中调用异步请求

08. 在什么阶段可以访问操作DOM？

• 在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM
• 但是也可以通过$nextTick()的回调函数来操作访问DOM

09. 父子组件生命周期执行顺序？

• 加载渲染过程：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
• 子组件更新过程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
• 父组件更新过程：父 beforeUpdate -> 父 updated
• 销毁过程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

10. 父组件监听子组件的生命周期？

• 可以在子组件的对应生命周期内，通过$emit向父组件派发事件，然后父组件监听这个事件

  // Parent.vue
  <Child @mounted="doSomething"/>
      
  // Child.vue
  mounted() 
    this.$emit("mounted");
  
  

• 可以直接在父组件引用子组件时通过 @hook 来监听

  • 子组件不需要做任何处理

  // Parent.vue
  <Child @hook:mounted="doSomething"/>