vue.js - vue 语法问题

问题描述

问 题

new Vue({
    router,
    store,
})

1、这里的router，store为什么可以这样用，我的理解是es6的语法，完整应该是router:router
但是我翻遍文档都没有找到router这个选项？

2、已经在src/router/index.js中使用了Vue.use(Router),为什么还要在实例里写router?

解决方案

是的，你的理解是对的，是es6的语法。

翻遍文档没有router和store选项，这是必然的，因为这两个选项Vue实例中确实没有，那么怎么就有了呢

这就是你Vue.use(Router)的作用，看一下Vue.use是干嘛的

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

那么猜测一下是不是install里面搞了router选项和store选项，查看vue-router源码,果然是这样搞的。

那么store选项也应该是同理，你可以自行查看vuex源码中install。附vue-router的install.js中部分源码：

 Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router
        this._router.init(this)
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })

  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

Vue.mixin
全局注册一个混合，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混合，向组件注入自定义的行为。不推荐在应用代码中使用。

这篇关于vue.js - vue 语法问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！