Vue.prototype詳解

如果需要設置全局變量或全局方法，並且不想污染全局作用域，這種情況下，可以通過在原型上定義它們使其在每個 Vue 的實例中可用。在main.js中添加。

1、基本示例

在main.js中添加一個變量到 Vue.prototype，代碼如下：

Vue.prototype.$appName = 'My App'

這樣 $appName 就在所有的 Vue 實例中可用了，甚至在實例被創建之前就可以。如果我們運行：

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})

則控制台會打印出 My App。就這么簡單！

2、你可能會好奇：

“為什么 appName 要以 $ 開頭？這很重要嗎？”

這里沒有什么魔法。$ 是在 Vue 所有實例中都可用的 property 的一個簡單約定。這樣做會避免和已被定義的數據、方法、計算屬性產生沖突。

“你指的沖突是什么意思？”

另一個好問題！如果你寫成：

Vue.prototype.appName = ‘My App’

那么如下的代碼輸出什么：

new Vue({
  data: {
    // 啊哦，`appName` *也*是一個我們定義的實例屬性名！😯
    appName: 'The name of some other app'
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  }
})

日志中會先出現 “My App”，然后出現 “The name of some other app”，因為 this.appName 在實例被創建之后被 data 覆寫了。我們通過 $ 為實例屬性設置作用域來避免這種事情發生。你還可以根據你的喜好使用自己的約定，諸如 $_appName 或 ΩappName，來避免和插件或未來的插件相沖突。

 

如需了解更多可前往vue官網 https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html