vue3中遇到reactive响应式失效的问题记录

const dataList = reactive([]);
const load = async () => {
  const res = await 接口函数（）; //假设请求接口返回的数据
  // 方法1 失败，直接赋值丢失了响应性
  // dataList = res;
  // 方法2 这样也是失败
  // dataList.concat(res);
};

let datalist = reactive({
  list: [],
})
let arr = [1,2,3]
datalist.list = arr

const datalist = ref([])
datalist.value = [1, 2, 3] 

let datalist = reactive([])
let arr = [1, 2, 3]
arr.forEach((item) => { 
 datalist.push(item)
}) 

let datalist = reactive([])
let arr = [1, 2, 3]
datalist.push(...arr)

<div>{{counter}}</div>
<div>{{obj.value}}</div>
const reactiveObj = reactive({
  counter: 0,
  obj: {
    value: 1
  }
});
setInterval(() => {
  reactiveObj.counter++;
  reactiveObj.obj.value++;
}, 1000);
const { counter, obj } = reactiveObj;
return {
  counter,
  obj
};

const obj = {
    value: 1
}
const proxy = new Proxy(obj, {
    get: function(target, key) {
        return Reflect.get(...arguments);
    },
    set: function(target, key, value) {
        return Reflect.set(...arguments)
    }
})
proxy.value++;
console.log(proxy.value);   // 2

export function ref(value?: unknown) {
  return createRef(value, false)
}
function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue
  }
  // 使用一个对象包裹基本数据类型数据
  return new RefImpl(rawValue, shallow)
}
class RefImpl<T> {
  private _value: T
  private _rawValue: T
  public dep?: Dep = undefined
  public readonly __v_isRef = true
  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = __v_isShallow ? value : toRaw(value)
    this._value = __v_isShallow ? value : toReactive(value)
  }
  get value() {
    trackRefValue(this)
    return this._value
  }
  set value(newVal) {
    newVal = this.__v_isShallow ? newVal : toRaw(newVal)
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = this.__v_isShallow ? newVal : toReactive(newVal)
      triggerRefValue(this, newVal)
    }
  }
}

export const toReactive = <T extends unknown>(value: T): T =>
  isObject(value) ? reactive(value) : value
export function reactive(target: object) {
  if (isReadonly(target)) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

let reactiveObj = ref({
  counter: 0,
  obj: {
    a: 1
  }
});
console.log(reactiveObj.value.obj.a);

const obj = {
  value: 1，
  obj1: {
    value: 1
  }
}
const val = obj.value;
const obj1 = obj.obj1;