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

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

模板語法

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

計(jì)算屬性

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

條件渲染

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

列表渲染

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

表單控件

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

組件

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

響應(yīng)原理

vue中的數(shù)據(jù)雙向綁定中，只有改變vue實(shí)例上的屬性時才能動態(tài)更新試圖。

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

數(shù)組解決方式：

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

對象只能用第一種方式。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論