1. 程式人生 > >vue的一些註意點

vue的一些註意點

targe 模版 condition emit 自動註入 display 引擎 href javascrip

    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。盡管它們的運行類似,但是onon和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)

    對象只能用第一種方式。

vue的一些註意點