MVVM原理

数据驱动视图

• Vue-mvvm
• React-setState

MVVM

Model Vue Vue Model

Vue响应式

• Vue2中使用Object.defineProperty()
  • 如果对象里有数组，数组更改无法劫持
  • 新增对象属性无法触发视图更新
• Vue3使用Proxy() 兼容性不好 也无法polyfill

defineProperty基本用法

监听简单对象

    const data = {};const name = "lc";Object.defineProperty(data, "name", {get: function () {console.log("get...");return name;},set: function (newVal) {console.log("set...");name = newVal}});console.log(data);

深度监听

• 需要递归到底，一次性计算量大
• 无法监听新增属性/删除属性（Vue.set/Vue.delete）

// 触发更新视图
function updateView() {console.log('视图更新');
}// 重新定义属性，监听起来
function defineReactive(target, key, value) {// 深度监听observer(value);// 核心 APIObject.defineProperty(target, key, {get() {console.log("get...");return value;},set(newValue) {console.log("set...");if (newValue !== value) {// 深度监听observer(newValue);// 设置新值// 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值value = newValue;// 触发更新视图updateView();}}});
}// 监听对象属性
function observer(target) {if (typeof target !== 'object' || target === null) {// 不是对象或数组return target;}// 重新定义各个属性（for in 也可以遍历数组）for (let key in target) {defineReactive(target, key, target[key]);}
}// 准备数据
const data = {name: 'lc',age: 20,info: {address: '成都' // 需要深度监听},
};// 监听数据
observer(data);// 测试
console.log(data);

监听数组

// 重新定义数组原型
const oldArrayProperty = Array.prototype;
// 创建新对象，原型指向 oldArrayProperty ，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
// 对数组扩展新的方法
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {arrProto[methodName] = function () {updateView(); // 触发视图更新oldArrayProperty[methodName].call(this, ...arguments);// Array.prototype.push.call(this, ...arguments)};
});
console.log(arrProto);

// 触发更新视图
function updateView() {console.log('视图更新');
}// 重新定义数组原型
const oldArrayProperty = Array.prototype;
// 创建新对象，原型指向 oldArrayProperty ，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
// 对数组扩展新的方法
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {arrProto[methodName] = function () {updateView(); // 触发视图更新oldArrayProperty[methodName].call(this, ...arguments);// Array.prototype.push.call(this, ...arguments)};
});
console.log(arrProto);// 重新定义属性，监听起来
function defineReactive(target, key, value) {// 深度监听observer(value);// 核心 APIObject.defineProperty(target, key, {get() {console.log("get...");return value;},set(newValue) {console.log("set...");if (newValue !== value) {// 深度监听observer(newValue);// 设置新值// 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值value = newValue;// 触发更新视图updateView();}}});
}// 监听对象属性
function observer(target) {if (typeof target !== 'object' || target === null) {// 不是对象或数组return target;}if (Array.isArray(target)) {target.__proto__ = arrProto;}// 重新定义各个属性（for in 也可以遍历数组）for (let key in target) {defineReactive(target, key, target[key]);}
}// 准备数据
const data = {name: 'lc',age: 20,info: {address: '成都' // 需要深度监听},arr: [10, 20, 30]
};// 监听数据
observer(data);// 测试
console.log(data);

虚拟DOM

• DOM操作非常耗费性能
• vdom用JS模拟DOM结构，计算出最小的变更来操作DOM

diff算法

• 是vdom的核心部分
• key值就是diff的一个体现

两棵DOM树作对比

树diff的事件复杂度O(n^3)

1. 遍历tree1，
2. 遍历tree2
3. 排序

时间复杂度太高，算法不可用

优化复杂度到O(n)

• 只比较同一层，不跨级比较
• tag不相同，直接删除重建，不再深度比较
  
• tag和key两者都相同，则认为是相同节点，不再深度比较