Vue3 中 ref 与 reactive 区别

Vue3 中 ref 与 reactive 区别
除虫耗时 30Mins ~

// 以下为错误用法
const files = ref({
    //加载状态
    loading: true,
    //图片列表
    list: [],
});
//错误用法 vue3中 不应该再使用this
this.files.loading.value = true;

ref 应该只用在基本数据类型上 而复杂对象 如 数组 obj 应该用 reactive()

// 以下为正确用法
const data = reactive({
  form: {},
  files : {
    //加载状态
    loading: true,
    //图片列表
    list: [],
  }

});

//这样是正确的
data.files.loading = true;
//或者也可以再解一次包直接调用 但是得加.value
const {form, files} = toRefs(data);
//这样也是正确的
files.value.loading = true；

原理角度对比：
ref 通过 Class 的 get 与 set 来实现响应式的（数据劫持）
reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过Reflect 操作源对象内部的数据。

使用角度对比：
ref 定义的数据：操作数据需要 .value,读取数据时模版中直接读取不需要 .value
reactive 定义的数据：操作数据与读取数据，均不需要 .value