Vue.js在使用中的一些注意知識點

 

 

1.每一個 Vue 實例都會代理其 data 對象裏全部的屬性。

2.注意只有這些被代理的屬性是響應的。若是在實例建立以後添加新的屬性到實例上，它不會觸發視圖更新。

3.除了 data 屬性，Vue實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區分。

模板語法

1.Vue.js 使用了基於HTML的模版語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。

2.在底層的實現上， Vue 將模板編譯成虛擬DOM 渲染函數。結合響應系統，在應用狀態改變時， Vue 可以智能地計算出從新渲染組件的最小代價並應用到 DOM 操做上。

3.Mustache裏面只能是JS表達式，不然不會生效。

4.指令的職責就是當其表達式的值改變時相應地將某些行爲應用到 DOM 上。

5.過濾器設計目的就是用於文本轉換，爲了在其餘指令中實現更復雜的數據變換，你應該使用計算屬性。

計算屬性

1.計算屬性方法在組件 beforeMount 以後，Mounted 以前都會執行一遍。

2.計算屬性方法能夠沒有返回值。可是該屬性使用，即在模板中使用了，不然不起任何做用。

3.不通過計算屬性，咱們能夠在method中定義一個相同的函數來替代它。對於最終的結果，兩種方式確實是相同的。然而，不一樣的是計算屬性是基於它的依賴緩存。計算屬性只有在它的相關依賴發生改變時纔會從新取值。這就意味着只要message沒有發生改變，屢次訪問reversedMessage（computed內的一個方法）計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

4.計算屬性是依賴緩存的；而methods是沒有緩存的，每次都執行一遍。

5.計算屬性默認只有getter，不過在須要時你也能夠提供一個 setter。參考官方實例：https://cn.vuejs.org/v2/guide/computed.html#計算-setter

6.當你想要在數據變化響應時，執行異步操做或開銷較大的操做，water方法（或者 vm.$watch API）是頗有用的。

條件渲染

1.不一樣的是有 v-show 的元素會始終渲染並保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display 。

2.通常來講， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以，若是須要頻繁切換使用 v-show 較好，若是在運行時條件不大可能改變則使用 v-if 較好。

3.vue嘗試儘量高效的渲染元素，一般會複用已有元素而不是從頭開始渲染。可是條件渲染的時候，有時須要從新渲染而不是服用已有元素，因此能夠經過設置惟一的key來實現元素不復用。參考官方例子：https://cn.vuejs.org/v2/guide/conditional.html#使用-key-控制元素的可重用

列表渲染

1.在遍歷對象時，是按 Object.keys() 的結果遍歷，可是不能保證它的結果在不一樣的 JavaScript 引擎下是一致的。

2.v-for 也能夠取整數。在這種狀況下，它將重複屢次模板。

3.在用 v-for 渲染組件的時候，不能自動傳遞數據到組件裏，由於組件有本身獨立的做用域。爲了傳遞迭代數據到組件裏，咱們要用 props。不自動注入 item 到組件裏的緣由是，由於這使得組件會緊密耦合到 v-for 如何運做。

表單控件

1.對於單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 一般是靜態字符串（對於勾選框是邏輯值）。

組件

1.在 Vue 裏，一個組件實質上是一個擁有預約義選項的一個 Vue 實例。

2.使用組件時，大多數選項能夠被傳入到Vue構造器中，有一個例外： data 必須是函數。 緣由的話，由於組件可能被屢次調用，當data爲普通對象時，data內的數據會被共享，當爲函數的時候，則每一個組件生成的爲獨立data做用域。

3.在 Vue.js 中，父子組件的關係能夠總結爲 props down, events up 。父組件經過 props 向下傳遞數據給子組件，子組件經過 events 給父組件發送消息。

4.注意在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，若是 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

5.Vue的事件系統分離自瀏覽器的EventTarget API。儘管它們的運行相似，可是on和on和emit 不是addEventListener 和 dispatchEvent 的別名。

6.$refs 只在組件渲染完成後才填充，而且它是非響應式的。它僅僅做爲一個直接訪問子組件的應急方案——應當避免在模版或計算屬性中使用 $refs 。

響應原理

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

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

數組解決方式：

對象只能用第一種方式。

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