reactive 是浅层相应吗

当使用 reactive 创建响应式对象时，它只会对对象的顶层属性进行响应式处理，而不会递归地处理嵌套对象内部的属性。这就是所谓的浅层响应式。我可以用一些代码来演示这一点：

import { reactive } from 'vue';

// 创建一个普通的 JavaScript 对象
const user = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

// 使用 reactive 函数创建响应式对象
const reactiveUser = reactive(user);

// 直接修改顶层属性
reactiveUser.name = 'Bob';

// 修改嵌套对象的属性
reactiveUser.address.city = 'San Francisco';

console.log(reactiveUser.name); // 输出: Bob
console.log(reactiveUser.address.city); // 输出: San Francisco

在上面的示例中，我们使用 reactive 函数创建了一个响应式对象 reactiveUser，然后修改了它的顶层属性 name 和嵌套对象 address 的 city 属性。

尽管我们成功修改了顶层属性 name，但是对于嵌套对象 address 的 city 属性，Vue 并没有自动地将其变为响应式。这意味着当我们修改了 reactiveUser.address.city 时，Vue 不会检测到这个变化。

因此，在使用 reactive 创建响应式对象时，需要注意它只会处理对象的顶层属性，而不会对嵌套对象的属性进行深层处理。

<template>
  <div> {{  obs.name.age.a }}</div>
</template>

<script setup lang="ts">
import { reactive, toRefs,ref, toRaw, watchEffect } from "vue";
const obs = reactive({
  foo: 1,
  name:{
    age:{
      a:32434
    }
  },
  bar: 1,
});
obs.name.age.a = 234
console.log(obs, obs.name,'obj')




const refObj = ref({
  foo: 1,
  bar: 1,
});

// console.log(refObj,refObj.value, 'refObj')

// // let { foo, bar } = toRefs(obj);
// // foo.value++;
// // console.log(foo, 9999999999999);
// const fo = {name: '123'};
// const reactiveFoo = reactive(fo);
// console.log(reactiveFoo,'reactiveFoo')

// console.log(toRaw(reactiveFoo) === fo); // true
</script>

原文地址：https://blog.csdn.net/m0_47999208/article/details/137834647

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！