【vue】关于new Vue()与Vue.use()

前言

本章为个人经过查阅文档后对new Vue()与Vue.use()的理解；
更多API参考 vue官方API手册

1、Vue.use(plugin)

描述：参数为{Object | Function}；用于调用插件的install方法并传入Vue构造器，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，进行初始化操作；可以说是插件构造器与Vue构造器的关系，当然内部可能是插件实例。

• 该方法需要在调用 new Vue() 之前被调用
• 要使用Vue.use()的插件必须有 install 方法
• 如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

2、new Vue()

描述：用于创建vue实例，将传入的组件选项对象与当前这个实例结合，用法为new Vue({ 组件选项对象 })；

• 与Vue.use()区别在于：因为有的插件针对不同项目需要添加自定义配置，所以需要new这个插件的实例，而这个插件的实例要使用就是通过当作选项对象传到new Vue({})中，这也是因为插件给我们提供了可扩展性；而且前者是绑定到Vue构造器上是全局的，虽然我们项目中只有一个vue实例，但传入的插件实例是绑定到当前这个vue实例上的。可以说是插件实例与vue实例的关系。
• 主要操作：传入option，合并option配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')