Vue中一些重要的知識點

本文主要和大家分享Vue中一些重要的知識點，希望能幫助大家。

不要在選項屬性或回呼上使用箭頭函數

例如

• #created: () => console.log(this.a)

• vm.$watch('a', newValue => this.myMethod())
  因為箭頭函數是和父級上下文綁定在一起的，this 不會是如你所預期的Vue 實例，經常導致Uncaught TypeError: Cannot read property of undefined 或Uncaught TypeError: this.myMethod is not a function 之類的錯誤

#具體見:這裡

#v-html

雙大括號會將資料解釋為普通文本，而非HTML 程式碼。為了輸出真正的HTML，你需要使用v-html 指令：

<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p>

具體見:這裡

##計算屬性快取vs 方法

我們可以將相同函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是

計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有改變，多次存取 reversedMessage 計算屬性會立即傳回先前的計算結果，而不必再執行函數。 這個 計算屬性是基於它們的依賴進行快取的 是什麼意思呢？

computed: {  now: function () {    return Date.now()
  }
}

這裡雖然

Date.now()的值一直在變，但是他沒有被watch，因為他不是響應式依賴。

具體見:這裡

CSS樣式自動加入前綴

當

v-bind:style 使用需要新增瀏覽器引擎前綴的CSS 屬性時，如transform，Vue.js 會自動偵測並加入對應的前綴。

具體見: 這裡

在