本文介紹的Vue.js在使用中的一些注意知識點，對大家具有一定的參考價值，下面來看看詳細的介紹吧。

• 每個 Vue 實例都會代理其 data 對象里所有的屬性。
• 注意只有這些被代理的屬性是響應的。如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。
• 除了 data 屬性，Vue實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區分。

模板語法

• Vue.js 使用了基于HTML的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。
• 在底層的實現上， Vue 將模板編譯成虛擬DOM 渲染函數。結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應用到 DOM 操作上。
• Mustache里面只能是JS表達式，否則不會生效。
• 指令的職責就是當其表達式的值改變時相應地將某些行為應用到 DOM 上。
• 過濾器設計目的就是用于文本轉換，為了在其他指令中實現更復雜的數據變換，你應該使用計算屬性。

計算屬性

• 計算屬性方法在組件 beforeMount 之后，Mounted 之前都會執行一遍。
• 計算屬性方法可以沒有返回值。但是該屬性使用，即在模板中使用了，否則不起任何作用。
• 不經過計算屬性，我們可以在method中定義一個相同的函數來替代它。對于最終的結果，兩種方式確實是相同的。然而，不同的是計算屬性是基于它的依賴緩存。計算屬性只有在它的相關依賴發生改變時才會重新取值。這就意味著只要message沒有發生改變，多次訪問reversedMessage（computed內的一個方法）計算屬性會立即返回之前的計算結果，而不必再次執行函數。
• 計算屬性是依賴緩存的；而methods是沒有緩存的，每次都執行一遍。
• 計算屬性默認只有getter，不過在需要時你也可以提供一個 setter。參考官方實例：https://cn.vuejs.org/v2/guide/computed.html#計算-setter
• 當你想要在數據變化響應時，執行異步操作或開銷較大的操作，water方法（或者 vm.$watch API）是很有用的。

條件渲染

• 不同的是有 v-show 的元素會始終渲染并保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display 。
• 一般來說， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 v-if 較好。
• vue嘗試盡可能高效的渲染元素，通常會復用已有元素而不是從頭開始渲染。但是條件渲染的時候，有時需要重新渲染而不是服用已有元素，所以可以通過設置唯一的key來實現元素不復用。參考官方例子：https://cn.vuejs.org/v2/guide/conditional.html#使用-key-控制元素的可重用

列表渲染

• 在遍歷對象時，是按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的。
• v-for 也可以取整數。在這種情況下，它將重復多次模板。
• 在用 v-for 渲染組件的時候，不能自動傳遞數據到組件里，因為組件有自己獨立的作用域。為了傳遞迭代數據到組件里，我們要用 props。不自動注入 item 到組件里的原因是，因為這使得組件會緊密耦合到 v-for 如何運作。

表單控件

• 對于單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 通常是靜態字符串（對于勾選框是邏輯值）。
  

組件

• 在 Vue 里，一個組件實質上是一個擁有預定義選項的一個 Vue 實例。
• 使用組件時，大多數選項可以被傳入到Vue構造器中，有一個例外： data 必須是函數。 原因的話，因為組件可能被多次調用，當data為普通對象時，data內的數據會被共享，當為函數的時候，則每個組件生成的為獨立data作用域。
• 在 Vue.js 中，父子組件的關系可以總結為 props down, events up 。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。
• 注意在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。
• Vue的事件系統分離自瀏覽器的EventTarget API。盡管它們的運行類似，但是on和on和emit 不是addEventListener 和 dispatchEvent 的別名。
• $refs 只在組件渲染完成后才填充，并且它是非響應式的。它僅僅作為一個直接訪問子組件的應急方案――應當避免在模版或計算屬性中使用 $refs 。

響應原理

vue中的數據雙向綁定中，只有改變vue實例上的屬性時才能動態更新試圖。

當data中有一個屬性為對象和數組時，直接修改對象和數組的某一項數據是沒辦法觸發試圖更新的。https://vuefe.cn/v2/guide/list.html#注意事項 https://vuefe.cn/v2/guide/reactivity.html#變化檢測問題

數組解決方式：

Vue.set(example1.items, indexOfItem, newValue);example1.items.splice(indexOfItem, 1, newValue)

對象只能用第一種方式。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。