在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue 異步執(zhí)行 DOM 更新,但是為什么v-model卻是實時更新的?

Vue 異步執(zhí)行 DOM 更新,但是為什么v-model卻是實時更新的?

官網(wǎng)上說:Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化,Vue 將開啟一個隊列,并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個 watcher 被多次觸發(fā),只會一次推入到隊列中。這種在緩沖時去除重復(fù)數(shù)據(jù)對于避免不必要的計算和 DOM 操作上非常重要。然后,在下一個的事件循環(huán)“tick”中,Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作
但是為什么v-model的數(shù)據(jù)更新不是多次變更和一次來更新DOM?

回答
編輯回答
玄鳥

v-model 當(dāng)文本框change時 會觸發(fā) watch與computed函數(shù)
(大概說下vue 內(nèi)部的一個機制)

==1:當(dāng)你實例中定義了input,那么意味著需要對這個變量進行defineProperty的處理,并創(chuàng)建Dep對象,同時與之相關(guān)的 都會有一個引用
==2:watch中的input函數(shù)會變成一個Watcher對象,在data的input的Dep中保存一份引用
==3:computed中的compiledMarkdown函數(shù)會變成一個Watcher對象,所以需要在data的input的Dep中保存一份引用
4:還會存在另一份引用 用來把Virtual DOM和DOM進行比對 實現(xiàn)最簡潔的渲染辦法 (vue強大之處)然后實現(xiàn)頁面數(shù)據(jù)的改變 也就是dom渲染

v-model 的大概流程 具體可以看看

https://mp.weixin.qq.com/s?__...

2017年10月29日 20:09
編輯回答
青裙

機制不一樣。
v-model其實是 :value + @input 組合的語法糖

2017年11月4日 19:50