vue3 原始值赋值和引用型赋值的不同

在Vue3中，原始值赋值和引用型赋值的主要不同在于对数据的响应式处理。原始值包括数字、字符串、布尔值、空值、未定义值等，引用型包括数组、对象、函数等。

原始值赋值：

当使用原始值赋值时，Vue3会将数据转换为响应式数据，该数据在被修改时，视图会即时刷新。但是，数据的原始值并不具有响应式特性，如果再次赋值时，需要手动触发视图更新。

引用型赋值：

当使用引用型赋值时，数据本身具有响应式特性。当数据被修改时，视图会自动刷新。但是，当重新赋值给同一变量时，引用型变量会改变内存中的指向，而不是数据本身。因此，需要使用Vue提供的响应式API来更新数据。如使用Vue.set方法。

综上所述，对于原始值赋值和引用型赋值，需要考虑数据的响应式特性和触发视图更新的方式。在实际开发中，需要根据具体的场景选择合适的方法。

相关问题

vue3 赋值reactive

在 Vue 3 中，我们可以使用 `reactive` 函数来将一个普通对象转换成响应式对象。`reactive` 函数接受一个普通对象作为参数，并返回一个响应式代理对象。这个代理对象可以监听到对象属性的变化，并在变化时触发相应的更新。

下面是一个简单的示例代码：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

console.log(state.count); // 输出: 0

state.count++; // 修改 count 属性的值

console.log(state.count); // 输出: 1

在上面的代码中，我们使用 `reactive` 函数将一个包含 `count` 属性的普通对象转换成响应式对象 `state`。通过访问 `state.count` 属性，我们可以获取到初始值 0，并且当修改 `state.count` 的值时，会触发相应的更新。

需要注意的是，只有在响应式对象上访问或修改属性时，才能保证响应式系统正常工作。如果直接修改原始对象上的属性值，将无法触发更新。

vue3 torefs

Vue 3中的toRefs是一个重要的函数，它在响应式数据的处理中起到了关键作用。它可以将一个响应式对象转换为普通的响应式引用，使得在模板中访问该对象的属性时保持响应式。

在Vue 2中，我们可以通过this.$refs访问子组件中的DOM元素或组件实例。然而，在Vue 3中，this.$refs不再是响应式的。为了解决这个问题并使得在Vue 3中访问子组件或子组件的属性变得更容易，我们可以使用toRefs函数。通过使用toRefs，我们可以将子组件的属性转换为普通的响应式引用，从而在模板中访问这些属性时保持响应式。

一个示例代码如下：

import { toRefs, reactive } from 'vue';

const App = {
  setup() {
    const data = reactive({
      count: 0
    });

    const countRef = toRefs(data).count;

    return {
      countRef
    };
  }
};

在上面的示例中，我们使用toRefs将count属性转换为普通的响应式引用countRef。这样，在模板中访问countRef就会保持响应式。

相比于ref和reactive，toRefs具有以下优势：
1. toRefs可以将一个响应式对象的所有属性都转换为普通的响应式引用，而ref只能转换一个属性。
2. toRefs生成的引用可以在模板中直接使用，而reactive生成的引用需要使用.value来访问。
3. toRefs生成的引用保持了原始对象的响应式性，而ref和reactive生成的引用是新的响应式对象。

在使用toRefs的时候，需要注意以下几点：
1. toRefs只能用于响应式对象，不能用于普通对象。
2. toRefs生成的引用不能被修改，如果需要修改属性的值，应该直接修改原始对象。
3. toRefs生成的引用在模板中访问时需要使用解构赋值的方式，例如：`<div>{{ countRef }}</div>`。

综上所述，toRefs是Vue 3中一个非常有用的函数，它可以将响应式对象转换为普通的响应式引用，使得在模板中访问属性时保持响应式。在Vue 3中，toRefs是访问子组件或子组件属性的一个推荐方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue 3 中的 toRefs：响应式数据的关键函数](https://blog.csdn.net/qq_29901385/article/details/131951317)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]