vue3手写shallowRef浅的ref

Posted 2022-02-03 web半晨

目录

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

---

1、函数实现

// 定义一个shallowRef函数
function shallowRef(target) 
  return 
    // 保存target数据保存起来
    _value: target,
    get value() 
      console.log('劫持到了读取数据');
      return this._value;
    ,
    set value(val) 
      console.log('劫持到了修改数据，准备更新界面', val);
      this._value = val;
    
  

---

2、函数调用

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