vue2 原理【详解】MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法

// 触发更新视图
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);
  };
});

// 重新定义属性，监听起来
function defineReactive(target, key, value) {
  // 深度监听
  observer(value);

  // 核心 API
  Object.defineProperty(target, key, {
    get() {
      return value;
    },
    set(newValue) {
      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: "张三",
  age: 20,
  info: {
    address: "北京", // 需要深度监听
  },
  nums: [10, 20, 30], // 需要深度监听
};

// 监听数据
observer(data);

// 测试
data.name = "李四"; // 无需深度监听
data.age = 21; // 无需深度监听
data.x = "100"; // 新增属性，监听不到 —— 需用 Vue.set
delete data.name; // 删除属性，监听不到 —— 需用 Vue.delete
data.info.address = "上海"; // 对象属性的属性，需要深度监听
data.nums.push(4); // 数组需要深度监听

this.$set(this.arr, "3", 7)

// 判断操作目标是否是数组，传入的数组下标是否规范
if (Array.isArray(target) && isValidArrayIndex(key)) {
  // 若传入的数组下标超过数组长度，则将数组长度增长为传入的下标，以防后续调用splice方法时因下标超出数组长度而报错。
  target.length = Math.max(target.length, key)
  // 使用添加了视图更新的 splice 方法实现响应式
  target.splice(key, 1, val)
  return val
 }

this.$set(this.obj, "新的属性", "新增的属性的值");
 

// 判断如果key本来就是对象中的一个属性，并且key不是Object原型上的属性, 则此属性已添加过响应式，直接修改值即可。
 if (key in target && !(key in Object.prototype)) {
  target[key] = val
  return val
 }
 // 获取 target对象的 __ob__ 属性
 const ob = (target: any).__ob__
 // 若 target对象是vue实例对象或者是根数据对象，则抛出错误警告。
 if (target._isVue || (ob && ob.vmCount)) {
  process.env.NODE_ENV !== 'production' && warn(
   'Avoid adding reactive properties to a Vue instance or its root $data ' +
   'at runtime - declare it upfront in the data option.'
  )
  return val
 }
 // 若 target 对象的 __ob__ 属性不存在，则 target 不是响应式对象,无需添加响应式监听，直接新增属性赋值即可。（ vue给响应式对象都加了 __ob__ 属性，如果一个对象有 __ob__ 属性，则说明这个对象是响应式对象）
 if (!ob) {
  target[key] = val
  return val
 }
 // 给新属性添加响应式监听
 defineReactive(ob.value, key, val)
 // 触发视图更新
 ob.dep.notify()
 return val

const compiler = require('vue-template-compiler')
const template = `<p>{{message}}</p>`
const res = compiler.compile(template)
console.log(res.render)

with(this){return _c('p',[_v(_s(message))])}

patch(container,vnode);

patch(vnode，newVnode);

patch(newVnode,null);