vue的一些註意點
-
每個 Vue 實例都會代理其 data 對象裏所有的屬性。
-
註意只有這些被代理的屬性是響應的。如果在實例創建之後添加新的屬性到實例上,它不會觸發視圖更新。
-
除了 data 屬性,Vue實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $,以便與代理的 data 屬性區分。
模板語法
-
Vue.js 使用了基於HTML的模版語法,允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循規範的瀏覽器和 HTML 解析器解析。
-
在底層的實現上, Vue 將模板編譯成虛擬DOM 渲染函數。結合響應系統,在應用狀態改變時, Vue 能夠智能地計算出重新渲染組件的最小代價並應用到 DOM 操作上。
-
Mustache裏面只能是JS表達式,否則不會生效。
-
指令的職責就是當其表達式的值改變時相應地將某些行為應用到 DOM 上。
-
過濾器設計目的就是用於文本轉換,為了在其他指令中實現更復雜的數據變換,你應該使用計算屬性。
計算屬性
-
計算屬性方法在組件 beforeMount 之後,Mounted 之前都會執行一遍。
-
計算屬性方法可以沒有返回值。但是該屬性使用,即在模板中使用了,否則不起任何作用。
-
不經過計算屬性,我們可以在method中定義一個相同的函數來替代它。對於最終的結果,兩種方式確實是相同的。然而,不同的是計算屬性是基於它的依賴緩存。計算屬性只有在它的相關依賴發生改變時才會重新取值
-
計算屬性是依賴緩存的;而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)
對象只能用第一種方式。
-
vue的一些註意點