Vue原理

如何理解MVVM

组件化

数据驱动视图

MVVM （Model View ViewModel）

Vue响应式原理

核心API：Object.defineProperty

const data={};
const name='zhangsan';

Object.defineProperty(data,name,{
get:function(name){
console.log('get');
return name
},
set:function(newval){
console.log('set');
name=newval;
}
})

Object.defineProperty的缺点：

深度监听，需要递归到底，计算量大

无法监听新增属性和删除属性，需要用到Vue.set和Vue.delete

Vue如何监听数组变化

if(Array.isArray(target)){
target.proto=arrproto;
}

const oldArrayProperty=Array.prototype;
const arrproto=Object.create(oldArrayProperty);
['push','pop','shift','unshift','splice'].forEach(
methodName=>arrproto[methodName]=function(){
updateView();
oldArrayProperty[methodname].call(this,...arguments);
}
);

diff算法

1.只比较同一层级，不跨级比较

2.tag不相同，则直接删掉重建，不再深度比较

3.tag和key，两者都相同，则认为是相同节点，不再深度比较

vue组件是如何渲染和更新的

初次渲染过程

解析模板为render函数

触发响应式，监听data属性 getter setter

执行render函数，生成vnode，patch（elem，vnode）

更新过程

修改data，触发setter

重新执行render函数，生成newVnode

patch（Vnode，newVnode）