随手笔记【四】-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51384850/article/details/141468987

vue3的响应式原理(数据劫持+观察者模式)

Vue 3的响应式系统建立在JavaScript的Proxy对象和Vue 2的Object.defineProperty之上

proxy

Proxy 是JavaScript中的一个内置对象，它允许你创建一个代理对象，可以用来拦截对目标对象的各种操作，例如读取、写入、属性检索等。

创建一个Proxy对象，需要传递两个参数：目标对象和一个处理器对象。处理器对象包含了一些方法，用于定义代理对象的行为。

const target = { name: 'John' };
const handler = {
  get(target, key) {
    console.log(`Getting ${key} property`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`Setting ${key} property to ${value}`);
    target[key] = value;
  }
};

const proxy = new Proxy(target, handler);

一旦创建了Proxy对象，你可以像使用普通对象一样使用它，但它会在后台执行拦截器方法。

console.log(proxy.name); // 会触发 get 拦截器，输出 "Getting name property"
proxy.age = 30; // 会触发 set 拦截器，输出 "Setting age property to 30"

ref和reactive

ref是Vue 3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的)。它的主要优点是能够轻松包装基本数据类型，并且具有清晰的访问和更新方式。

区别：

数据类型：ref用于包装基本数据类型（如数字、字符串），而reactive用于包装对象。
访问数据：使用ref时，需要通过.value来访问数据，而reactive则允许直接访问属性。
数据的包装：ref返回一个包装对象，而reactive返回一个包装后的对象。（决定是否需要通过.value访问数据）

对象的响应式

对象内部通过 defineReactive 方法，使用 Object.defineProperty 将属性进行劫持（只会劫持已经存在的属性），数组则是通过重写数组方法来实现。当页面使用对应属性时，每个属性都拥有自己的 dep 属性，存放他所依赖的 watcher（依赖收集），当属性变化后会通知自己对应的 watcher 去更新(派发更新)。

class Observer {
  // 观测值
  constructor(value) {
    this.walk(value);
  }
  watch(data) {
    // 对象上的所有属性依次进行观测
    let keys = Object.keys(data);
    for (let i = 0; i < keys.length; i++) {
      let key = keys[i];
      let value = data[key];
      defineReactive(data, key, value);
    }
  }
}
// Object.defineProperty数据劫持核心 兼容性在ie9以及以上
function defineReactive(data, key, value) {
  observe(value); // 递归关键
  // --如果value还是一个对象会继续走一遍odefineReactive 层层遍历一直到value不是对象才停止
  //   思考？如果Vue数据嵌套层级过深 >>性能会受影响
  Object.defineProperty(data, key, {
    get() {
      console.log("获取值");

      //需要做依赖收集过程 这里代码没写出来
      return value;
    },
    set(newValue) {
      if (newValue === value) return;
      console.log("设置值");
      //需要做派发更新过程 这里代码没写出来
      value = newValue;
    },
  });
}
export function observe(value) {
  // 如果传过来的是对象或者数组 进行属性劫持
  if (
    Object.prototype.toString.call(value) === "[object Object]" ||
    Array.isArray(value)
  ) {
    return new Observer(value);
  }
}

nextTick 原理

nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法

let callbacks = [];
let pending = false;
function flushCallbacks() {
  pending = false; //把标志还原为false
  // 依次执行回调
  for (let i = 0; i < callbacks.length; i++) {
    callbacks[i]();
  }
}
let timerFunc; //定义异步方法  采用优雅降级
if (typeof Promise !== "undefined") {
  // 如果支持promise
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
  };
} else if (typeof MutationObserver !== "undefined") {
  // MutationObserver 主要是监听dom变化 也是一个异步方法
  let counter = 1;
  const observer = new MutationObserver(flushCallbacks);
  const textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true,
  });
  timerFunc = () => {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
} else if (typeof setImmediate !== "undefined") {
  // 如果前面都不支持 判断setImmediate
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 最后降级采用setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

export function nextTick(cb) {
  // 除了渲染watcher  还有用户自己手动调用的nextTick 一起被收集到数组
  callbacks.push(cb);
  if (!pending) {
    // 如果多次调用nextTick  只会执行一次异步 等异步队列清空之后再把标志变为false
    pending = true;
    timerFunc();
  }
}