新舊虛擬dom經過diff比對,形成乙個補丁(patch(s))區域性更新真實dom
按dom樹的層級分解比較(嚴格的資料結構劃分)
同key值對比(v-for寫key,其他的元素會預設分配key)
注意:同元件對比(如元件props不同)在v-for對乙個陣列迴圈渲染的時候千萬別用索引值當做key值。
因為在是涉及陣列的增刪時候,索引值每一次都是從陣列第一位開始開始累加,也就是在增刪的索引值不是唯一的。
第一是效能的問題:每次key改變,就不只是區域性的更新,而是重新渲染整個列表。第二是bug:比如列表的每一項item是select,那麼當刪除後,select的值會發生改變。
因此我們一般用item的裡面id作為唯一可以值。
總結:虛擬dom,使我們可以不直接操作dom元素,只運算元據便可以重新渲染頁面。而隱藏在背後的原理便是其高效的diff演算法。
*子元件可以直接修改屬性?
props傳過來的屬性,在子元件內部可以修改(但父元件的值沒有修改),但是控制台會報錯,會發生不可預期的問題。因此自定義事件專門用於修改,從源頭(父元件)修改。
嚴格來說,vue子元件不能隨便更改父元件傳遞過來的屬性但是可以通過父元件中props加syncprops配合 $emit 改變父元件傳入的值(兩步實現在子元件直接改)
在父元件傳入值時,需要有***.sync修飾符;表示同步接收。
"warning" />
子元件加update
this.emi*v-once用在元件上有什麼用?t(′u
pdat
e:wa
rnin
g′;v
al)子
元件可以
在emit('update:warning';val) 子元件可以在
emit(′
upda
te:w
arni
ng′;
val)
子元件可
以在emit("update:***x』,val),派發事件修改傳入的值;再在父元件事件接收
在根元素
上新增v-once這個attribute以確保這些內容只計算一次,然後快取起來。元件不會更新
*v-model可以用在元件通訊?
子元件:
"mytext"
>
在子元件中獲取是:props=['value']; this.$emit('input',data);
接收是props中的value,觸發時input,而且子元件的使用中只需要寫v-model。這個value和input是一定要這麼寫
他是乙個語法糖,等價於其實就是子傳父,父傳子的簡寫方式。
了解原理才能更好的學習,一起加油進步!逆戰!
vue元件通訊 vue bus方面的總結
vue bus通常使用在兄弟與兄弟元件之間 然後在元件中,可以使用emit on,off分別來分發,監聽,取消監聽事件 這裡的 off可以取消多次使用 bus監聽的事件 使用用法 1 引入vue import vue from vue 2 在main.js中引入vue bus import bus ...
AIX方面的一些資源
常用aix論壇位址介紹 aix論壇 http loveunix.style images 1 logo4.gif img url 愛u家園 是大家的快樂空間 aix使用者論壇 chinaunix的aix論壇 aix中國論壇 思達奇公司的aix 技術區 itpub的unix論壇 銀信公司 aix練習 ...
一些語言方面的技巧
1.數字轉string int x string id stringstream ss ss id 2.字串轉數字 int num string s stringstream ss s ss num char str sscanf str,d num 將字串轉換成整數 sscanf str,f fl...