1.Vue.js 使用了基于HTML的模版語法货邓,允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML 栅迄,所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析冲茸。
2.在底層的實現(xiàn)上奠涌, Vue 將模板編譯成虛擬DOM渲染函數(shù)邪乍。結(jié)合響應(yīng)系統(tǒng)降狠,在應(yīng)用狀態(tài)改變時, Vue 能夠智能地計算出重新渲染組件的最小代價并應(yīng)用到 DOM 操作上庇楞。
3.Mustache里面只能是JS表達式榜配,否則不會生效。
4.指令的職責(zé)就是當(dāng)其表達式的值改變時相應(yīng)地將某些行為應(yīng)用到 DOM 上吕晌。
5.過濾器設(shè)計目的就是用于文本轉(zhuǎn)換芥牌,為了在其他指令中實現(xiàn)更復(fù)雜的數(shù)據(jù)變換,你應(yīng)該使用計算屬性聂使。
計算屬性
1.計算屬性方法在組件beforeMount之后壁拉,Mounted之前都會執(zhí)行一遍。
2.計算屬性方法可以沒有返回值柏靶。但是該屬性使用弃理,即在模板中使用了,否則不起任何作用屎蜓。
3.不經(jīng)過計算屬性痘昌,我們可以在method中定義一個相同的函數(shù)來替代它。對于最終的結(jié)果炬转,兩種方式確實是相同的辆苔。然而,不同的是計算屬性是基于它的依賴緩存扼劈。計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新取值驻啤。這就意味著只要message沒有發(fā)生改變,多次訪問reversedMessage(computed內(nèi)的一個方法)計算屬性會立即返回之前的計算結(jié)果荐吵,而不必再次執(zhí)行函數(shù)骑冗。
4.計算屬性是依賴緩存的;而methods是沒有緩存的先煎,每次都執(zhí)行一遍贼涩。
5.計算屬性默認只有g(shù)etter,不過在需要時你也可以提供一個 setter薯蝎。參考官方實例:https://cn.vuejs.org/v2/guide/computed.html#計算-setter
6.當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時遥倦,執(zhí)行異步操作或開銷較大的操作,water方法(或者 vm.$watch API)是很有用的占锯。
條件渲染
1.不同的是有 v-show 的元素會始終渲染并保持在 DOM 中袒哥。v-show 是簡單的切換元素的 CSS 屬性 display 。
2.一般來說烟央, v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗统诺。因此,如果需要頻繁切換使用 v-show 較好疑俭,如果在運行時條件不大可能改變則使用 v-if 較好粮呢。
3.vue嘗試盡可能高效的渲染元素,通常會復(fù)用已有元素而不是從頭開始渲染钞艇。但是條件渲染的時候啄寡,有時需要重新渲染而不是服用已有元素,所以可以通過設(shè)置唯一的key來實現(xiàn)元素不復(fù)用哩照。參考官方例子:https://cn.vuejs.org/v2/guide/conditional.html#使用-key-控制元素的可重用
列表渲染
1.在遍歷對象時挺物,是按 Object.keys() 的結(jié)果遍歷,但是不能保證它的結(jié)果在不同的 JavaScript 引擎下是一致的飘弧。
2.v-for 也可以取整數(shù)识藤。在這種情況下砚著,它將重復(fù)多次模板。
3.在用 v-for 渲染組件的時候痴昧,不能自動傳遞數(shù)據(jù)到組件里稽穆,因為組件有自己獨立的作用域。為了傳遞迭代數(shù)據(jù)到組件里赶撰,我們要用 props舌镶。不自動注入 item 到組件里的原因是,因為這使得組件會緊密耦合到 v-for 如何運作豪娜。
表單控件
1.對于單選按鈕餐胀,勾選框及選擇列表選項, v-model 綁定的 value 通常是靜態(tài)字符串(對于勾選框是邏輯值)瘤载。
組件
1.在 Vue 里否灾,一個組件實質(zhì)上是一個擁有預(yù)定義選項的一個 Vue 實例。
2.使用組件時惕虑,大多數(shù)選項可以被傳入到Vue構(gòu)造器中坟冲,有一個例外:data 必須是函數(shù)。 原因的話溃蔫,因為組件可能被多次調(diào)用健提,當(dāng)data為普通對象時,data內(nèi)的數(shù)據(jù)會被共享伟叛,當(dāng)為函數(shù)的時候私痹,則每個組件生成的為獨立data作用域。
3.在 Vue.js 中统刮,父子組件的關(guān)系可以總結(jié)為props down, events up紊遵。父組件通過 props 向下傳遞數(shù)據(jù)給子組件,子組件通過 events 給父組件發(fā)送消息侥蒙。
4.注意在 JavaScript 中對象和數(shù)組是引用類型暗膜,指向同一個內(nèi)存空間,如果 prop 是一個對象或數(shù)組鞭衩,在子組件內(nèi)部改變它會影響父組件的狀態(tài)学搜。
5.Vue的事件系統(tǒng)分離自瀏覽器的EventTarget API。盡管它們的運行類似论衍,但是on和on和emit 不是addEventListener 和 dispatchEvent 的別名瑞佩。
6.$refs 只在組件渲染完成后才填充,并且它是非響應(yīng)式的坯台。它僅僅作為一個直接訪問子組件的應(yīng)急方案——應(yīng)當(dāng)避免在模版或計算屬性中使用 $refs 炬丸。
響應(yīng)原理
1.vue中的數(shù)據(jù)雙向綁定中,只有改變vue實例上的屬性時才能動態(tài)更新試圖蜒蕾。
2.當(dāng)data中有一個屬性為對象和數(shù)組時稠炬,直接修改對象和數(shù)組的某一項數(shù)據(jù)是沒辦法觸發(fā)試圖更新的焕阿。https://vuefe.cn/v2/guide/list.html#注意事項https://vuefe.cn/v2/guide/reactivity.html#變化檢測問題
數(shù)組解決方式:
1.Vue.set(example1.items, indexOfItem, newValue);
2.example1.items.splice(indexOfItem, 1, newValue)
對象只能用第一種方式。