使用Vue.js時需要注意哪些問題？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
每個 Vue 實例都會代理其 data 對象里所有的屬性。
注意只有這些被代理的屬性是響應的。如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。
除了 data 屬性，Vue實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區(qū)分。
模板語法
Vue.js 使用了基于HTML的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。
在底層的實現(xiàn)上， Vue 將模板編譯成虛擬DOM 渲染函數(shù)。結(jié)合響應系統(tǒng)，在應用狀態(tài)改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應用到 DOM 操作上。
Mustache里面只能是JS表達式，否則不會生效。
指令的職責就是當其表達式的值改變時相應地將某些行為應用到 DOM 上。
過濾器設計目的就是用于文本轉(zhuǎn)換，為了在其他指令中實現(xiàn)更復雜的數(shù)據(jù)變換，你應該使用計算屬性。
計算屬性
計算屬性方法在組件 beforeMount 之后，Mounted 之前都會執(zhí)行一遍。
計算屬性方法可以沒有返回值。但是該屬性使用，即在模板中使用了，否則不起任何作用。
不經(jīng)過計算屬性，我們可以在method中定義一個相同的函數(shù)來替代它。對于最終的結(jié)果，兩種方式確實是相同的。然而，不同的是計算屬性是基于它的依賴緩存。計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新取值。這就意味著只要message沒有發(fā)生改變，多次訪問reversedMessage（computed內(nèi)的一個方法）計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。
計算屬性是依賴緩存的；而methods是沒有緩存的，每次都執(zhí)行一遍。
計算屬性默認只有g(shù)etter，不過在需要時你也可以提供一個 setter。參考官方實例：https://cn.vuejs.org/v2/guide/computed.html#計算-setter
當你想要在數(shù)據(jù)變化響應時，執(zhí)行異步操作或開銷較大的操作，water方法（或者 vm.$watch API）是很有用的。
條件渲染
不同的是有 v-show 的元素會始終渲染并保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display 。
一般來說， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 v-if 較好。
vue嘗試盡可能高效的渲染元素，通常會復用已有元素而不是從頭開始渲染。但是條件渲染的時候，有時需要重新渲染而不是服用已有元素，所以可以通過設置唯一的key來實現(xiàn)元素不復用。參考官方例子：https://cn.vuejs.org/v2/guide/conditional.html#使用-key-控制元素的可重用
列表渲染
在遍歷對象時，是按 Object.keys() 的結(jié)果遍歷，但是不能保證它的結(jié)果在不同的 JavaScript 引擎下是一致的。
v-for 也可以取整數(shù)。在這種情況下，它將重復多次模板。
在用 v-for 渲染組件的時候，不能自動傳遞數(shù)據(jù)到組件里，因為組件有自己獨立的作用域。為了傳遞迭代數(shù)據(jù)到組件里，我們要用 props。不自動注入 item 到組件里的原因是，因為這使得組件會緊密耦合到 v-for 如何運作。
表單控件
對于單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 通常是靜態(tài)字符串（對于勾選框是邏輯值）。
組件
在 Vue 里，一個組件實質(zhì)上是一個擁有預定義選項的一個 Vue 實例。
使用組件時，大多數(shù)選項可以被傳入到Vue構(gòu)造器中，有一個例外： data 必須是函數(shù)。 原因的話，因為組件可能被多次調(diào)用，當data為普通對象時，data內(nèi)的數(shù)據(jù)會被共享，當為函數(shù)的時候，則每個組件生成的為獨立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。盡管它們的運行類似，但是on和on和emit 不是addEventListener 和 dispatchEvent 的別名。
$refs 只在組件渲染完成后才填充，并且它是非響應式的。它僅僅作為一個直接訪問子組件的應急方案——應當避免在模版或計算屬性中使用 $refs 。
響應原理
vue中的數(shù)據(jù)雙向綁定中，只有改變vue實例上的屬性時才能動態(tài)更新試圖。
當data中有一個屬性為對象和數(shù)組時，直接修改對象和數(shù)組的某一項數(shù)據(jù)是沒辦法觸發(fā)試圖更新的。https://vuefe.cn/v2/guide/list.html#注意事項 https://vuefe.cn/v2/guide/reactivity.html#變化檢測問題
數(shù)組解決方式：
Vue.set(example1.items, indexOfItem, newValue); example1.items.splice(indexOfItem, 1, newValue)
對象只能用第一種方式。
看完上述內(nèi)容，你們掌握使用Vue.js時需要注意哪些問題的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
重慶分公司
重慶分公司
