前言

本章为个人经过查阅文档后对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')
Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐