vue3.0 shallowRef和ref响应式源码实现

ref和reactive相比,ref通过setter和getter进行数据劫持

代码示例:

function shallowRef(target) {
  
  return {
    _value: target,
    get value() {
      console.log('读取数据');
      return this._value;
    },
    set value(val) {
      console.log('修改数据');
      this._value = val;
    }
  }
}


function ref(target) {
  if (target && typeof target === "object") {
    target = reactive(target);
    return target;
  }

  return {
    _value: target,
    get value() {
      console.log('读取数据');
      return this._value;
    },
    set value(val) {
      console.log('修改数据');
      this._value = val;
    }
  }
}