MVVM 原理

MVVM：Model – View – ViewModel，数据驱动视图

• 各部分之间的通信都是双向的
• View 和 Model 不发生联系，通过 ViewModel 传递

响应式原理

在不同的 vue 版本中，实现响应式的方法不同：

• vue2: Object.defineProperty
  • 无法原生监听数组变化，vue对数组常用的方法进行了重写，其他方法无法监听
  • 必须遍历对象的每一个属性
  • 必须深度遍历嵌套的对象
  • 无法监听对象新增和删除属性
  • 需要在实例 data 声明所有响应值，在开始时一次性递归所有属性
  • 支持IE9
• vue3: Proxy
  • 按需监听，实现响应式，性能更好
  • 可直接监听对象，可监听新增和删除属性
  • 可直接监听数组的变化
  • 不兼容低版本IE浏览器，无法 polyfill
  • Proxy 返回的是一个新对象，我们可以只操作新的对象达到目的

Object.defineProperty

vue 会遍历 data 所有的 property （属性），并使用 Object.defineProperty 把这些 property 全部转化为 getter/setter ，每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher ，从而使它关联的组件重新渲染。

// 更新视图函数
function updateView() {
  console.log("更新视图");
}

// 重新定义属性，对属性进行监听
function defineReactive(target, key, value) {
  // 深度监听
  observer(target);
  // 响应 - 核心API
  Object.defineProperty(target, key, {
    get: function () {
      return value;
    },
    set: function (newValue) {
      if (value !== newValue) {
        // 深度监听
        observer(newValue);

        value = newValue;
        updateView();
      }
    },
  });
}

// 重新定义数组原型
const oldArrayProperty = Array.prototype;
// 创建新对象，原型指向 oldArrayProperty
// 再扩展新的方法不会影响原型
const arrayProto = Object.create(oldArrayProperty);
const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse",
];
methodsToPatch.forEach((methodName) => {
  arrayProto[methodName] = function () {
    // 更新视图
    updateView();
    // 调用数组原型方法进行更新
    oldArrayProperty[methodName].call(this, ...arguments);
  };
});

// 监听对象属性
function observer(target) {
  if (typeof target !== "object" || target === null) {
    return target;
  }

  if (Array.isArray(target)) {
    target.__proto__ = arrayProto;
  }

  // 遍历 重新定义各个属性，for in 可以便利数组
  for (const key in target) {
    defineReactive(target, key, target[key]);
  }
}

const data = {
  name: "Tom",
  age: 16,
  info: {
    school: "xx中学",
  },
  nums: [1, 2, 3],
};

// data 实现双向绑定，深度监听
observer(data);

// data.info.school = 'xxxx' // 深度监听
// data.nums.push(4) // 监听数组
// data.name = 'Rose'

// data.a = 'x' // 新属性，无法监听 // 使用Vue.set
// delete data.name // 删除属性，监听不到 // 使用Vue.delete

Proxy (数据代理)

Proxy 是 ES6 新增的内置对象，它用于定义基本操作的自定义行为。可以用于运算符重载、对象模拟，对象变化事件、双向绑定等。

function reactive(target = {}) {
  // 非对象或数组
  if (typeof target !== "object" || target === null) {
    return target;
  }

  // 代理配置
  const proxyHandler = {
    get(target, key, receiver) {
      // 只处理本身（非原型的）属性
      const ownKeys = Reflect.ownKeys(target);
      if (ownKeys.includes(key)) {
        // 监听
        console.log('get', key);
      }
      const result = Reflect.get(target, key, receiver);
      // 递归深度监听（性能提升）
      return reactive(result);
    },
    set(target, key, value, receiver) {
      // 重复数据，不处理
      if (value === target[key]) {
        return true;
      }
      // 只处理本身（非原型的）属性
      const ownKeys = Reflect.ownKeys(target);
      if (ownKeys.includes(key)) {
        console.log("已有的 key", key);
      } else {
        console.log("新增的 key", key);
      }
      const result = Reflect.set(target, key, value, receiver);
      // console.log('result', result) // true
      console.log('set', key, value)
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      return result;
    },
  };

  // 生成代理对象
  const observed = new Proxy(target, proxyHandler);
  return observed;
}

const data = {
  name: "Tom",
  age: 16,
  info: {
    school: "xx中学",
  },
  nums: [1, 2, 3],
};

const proxyData = reactive(data);

虚拟 DOM

虚拟 DOM （visual dom），常叫 vdom