###### tags: `Vue`
# Vue - 如何增添實例屬性

你可能會在很多組件裡用到資料 /實用工具，但是不想污染**全域作用域**。這種情況下，你可以通過在原型上定義它們使其在每個Vue的實例中可用。

## 範例

Vue.prototype.$appName = 'My App'

## 關於 $

可能會好奇是否 Vue prototype的屬性名是否必須 $ 開頭 ？ 其實並不是
但是絕對建議在 Vue prototype的屬性名都以 $ 開頭，原因如下 :

1. Vue的開發者都已經很熟悉$開頭為Vue prototype的屬性，若出現非 $ 開頭的 Vue prototype的屬性名，會造成其他開發者的困惑。
2. $是在Vue所有實例中都可用的屬性的一個**簡單約定**。這樣做會避免和已被定義的資料、方法、計算屬性產生衝突。

## 不好的範例

Vue.prototype.appName = 'My App'

new Vue({
  data: {
    // Uh oh - appName is *also* the name of the
    // instance property we defined!
    appName: 'The name of some other app'
  },
  beforeCreate: function() {
    console.log(this.appName)
  },
  created: function() {
    console.log(this.appName)
  }
})

console.log會先印出"My App"，然後再印出"The name of some other app"，因為this.appName在實例被創建之後被data 覆寫了。我們通過$為實例屬性設置作用域來避免這種事情發生。

## 何時避免使用

只要你對原型屬性的作用域保持警惕，那麼使用這個模式就是安全的——保證了這一點，就不太會出bug。

然而，有的時候它會讓其他開發者感到混亂。

這種便利是以顯性表達為代價的。當我們查閱一個組件的時候，要注意交代清楚$[prototypeName]是從哪來的：Vue自身、一個插件、還是一個輔助庫？

## 參考資料

* [Vue - Adding Instance Properties](https://vuejs.org/v2/cookbook/adding-instance-properties.html)
* [Accessing properties globally in Vue.js with prototypes](https://blog.logrocket.com/accessing-properties-globally-in-vue-js-with-prototypes/)