1.virtual dom
用JS模擬DOM結(jié)構(gòu),DOM變化的對比西雀,放在JS層做磺送,以提高重繪性能
DOM操作昂貴,JS運行效率高谋减,要減少DOM操作
使用:snabbdom的使用
核心API:h函數(shù) h(‘標(biāo)簽名’,{屬性},[子元素]) 或者h(yuǎn)(‘標(biāo)簽名’,{屬性},’’)
patch(container,vnode) 或者 path(vnode,newvnode)
2.MVVM中jQuery與Vue區(qū)別
視圖與數(shù)據(jù)的分離牡彻,解耦(開放封閉原則)
以數(shù)據(jù)驅(qū)動視圖,只關(guān)心數(shù)據(jù)出爹,DOM操作被封裝
3.對MVVM的理解
MVC:model view controller
(數(shù)據(jù)模型->視圖->控制器->數(shù)據(jù)模型)
或者 (控制器->數(shù)據(jù)模型->視圖)
MVVM:model view viewmodel(視圖與數(shù)據(jù)之間的橋:事件綁定庄吼,數(shù)據(jù)綁定)
4.Vue三要素
響應(yīng)式:修改data屬性后,Vue立刻監(jiān)聽到
響應(yīng)式核心:用Object.defineProperty,將data的屬性代理到vm上
模板引擎:
本質(zhì):字符串严就;有邏輯总寻,v-if,v-for等梢为,可以嵌入JS變量废菱,必須用JS才能實現(xiàn),轉(zhuǎn)換成html渲染頁面抖誉,模板最終轉(zhuǎn)化成JS函數(shù)(render函數(shù):with方法)
渲染
5.Vue的流程
解析模板成render函數(shù):
with的使用殊轴,模板中所有信息都被render函數(shù)包含
模板中用到的data中的屬性,都變成JS變量袒炉,模板中的v-model v-for v-on都變成JS邏輯旁理,render函數(shù)返回vnode
響應(yīng)式開始監(jiān)聽:
Object.defineProperty將data的屬性代理到VM上,使用get監(jiān)聽是為了防止重復(fù)渲染
首次渲染我磁,顯示頁面孽文,且綁定依賴
data屬性變化驻襟,觸發(fā)render
6.react
組件化:組件封裝,組件復(fù)用
組件封裝:封裝視圖芋哭、數(shù)據(jù)沉衣、變化邏輯(數(shù)據(jù)驅(qū)動視圖變化)
組件復(fù)用:props傳遞,復(fù)用
JSX本質(zhì):JSX是語法糖减牺,需要被解析成JS才能運行豌习,JSX是獨立的標(biāo)準(zhǔn),可被其他項目使用
JSX就是模板拔疚,最終要渲染成html
需要vdom的原因:JSX要渲染成html肥隆,數(shù)據(jù)驅(qū)動視圖
7.setState過程
setState的異步:
(原因):可能一次執(zhí)行多次setState,無法規(guī)定稚失、限制用戶如何使用setState栋艳,沒必要每次setState都重新渲染,考慮性能句各,即便每次重新渲染吸占,用戶看不到中間渲染的效果,所以只要最后的效果就可
8.Vue與react
兩者本質(zhì)的區(qū)別:模板和組件化的區(qū)別
Vue本質(zhì)是MVVM框架凿宾,由MVC發(fā)展而來矾屯;
React是前端組件化框架,由后端組件化發(fā)展而來菌湃;
Vue使用模板
React使用JSX
React本身就是組件化
Vue是在MVVM上擴(kuò)展的
共同點:
都支持組件化问拘,都是數(shù)據(jù)驅(qū)動視圖