vue3手写ref深的ref

Posted 2022-02-03 web半晨

目录

• 1、函数实现
• 2、函数调用

---

1、函数实现

// 定义一个reactive函数，传入一个目标对象
function reactive(target) 
  // 判断当前的目标对象是不是object类型(对象/数组)
  if (target && typeof target === 'object') 
    // 对数组或者是对象中所有的数据进行reactive的递归处理
    // 先判断当前的数据是不是数组
    if (Array.isArray(target)) 
      // 数组的数据要进行遍历操作0
      target.forEach((item, index) => 
        // 如果数组中还有数组
        // 使用递归
        target[index] = reactive(item);
      );
     else 
      // 再判断当前的数据是不是对象
      // 对象的数据也要进行遍历的操作
      Object.keys(target).forEach(key => 
        target[key] = reactive(target[key]);
      );
    
    return new Proxy(target, reactiveHandler);
  
  // 如果传入的数据是基本类型的数据，那么就直接返回
  return target;


// 定义一个ref函数
function ref(target) 
  target = reactive(target);
  return 
    _is_ref: true, // 标识当前的对象是ref对象
    // 保存target数据保存起来
    _value: target,
    get value() 
      console.log('劫持到了读取数据');
      return this._value;
    ,
    set value(val) 
      console.log('劫持到了修改数据，准备更新界面', val);
      this._value = val;
    
  

---

2、函数调用

const ref2 = ref(
      name: '小明',
      car: 
        color: 'red'
      
);
console.log(ref2.value);
// 劫持到
ref2.value = '==';
// 劫持到
ref2.value.car = '==';