Vue3 中 ref 与 reactive 区别
blank
blank
发布于 2023-03-30 / 21 阅读 / 0 评论 / 0 点赞

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


评论