1.如何理解MVVM(組件化)
- VM:vue使用了數(shù)據(jù)驅(qū)動(dòng)視圖(VM:view-model),這里一般體現(xiàn)在vue的事件監(jiān)聽(tīng)里面，即methos里面的，這里就是與原先那種MVM最本質(zhì)的區(qū)別，VM這個(gè)是VUE框架自帶的功能糊肤，框架會(huì)通過(guò)監(jiān)聽(tīng)不同的事件，修改數(shù)據(jù)，自動(dòng)渲染dom旺嬉，不需要人工去修改dom；
- Model:體現(xiàn)在vue里面的data數(shù)據(jù)里面厨埋；
- View：體現(xiàn)在模板即Html相關(guān)代碼邪媳；
2.VUE響應(yīng)式原理
- 1.vue響應(yīng)式原理,關(guān)鍵在于通過(guò)API,Object.defineProperty實(shí)現(xiàn)監(jiān)聽(tīng)和修改。原理代碼如下：
const data = {};
const name = 'zhangsan';
Object.defineProperty(data,"name", {
get:function () {
console.log(’get‘);
return name ;
},
set: function (newVal) {
console.log('set');
name = neaVal;
}
});
//測(cè)試
console.log(data.name);//結(jié)果：get zhangsan
data.name = 'list1';//運(yùn)行結(jié)果：set
- 2.Object.defineProperty實(shí)現(xiàn)監(jiān)聽(tīng)的缺點(diǎn)
1.深度監(jiān)聽(tīng)，需要遞歸到底雨效，一次性計(jì)算量大
2 .無(wú)法監(jiān)聽(tīng)新增屬性/刪除屬性(需要使用Vue.set,Vue.delete)
3 .無(wú)法原生監(jiān)聽(tīng)數(shù)組迅涮，需要特殊處理
虛擬DOM(vdom)和diff
通過(guò)vdom -用js模擬DOM結(jié)構(gòu)，計(jì)算出最小的變更徽龟，操作DOM
通過(guò)diff算法比較差異叮姑，進(jìn)行一些的數(shù)據(jù)驅(qū)動(dòng)視圖的操作
