响应式数据ref()和reactive()的利用

官方网址：响应式基础 | Vue.js

在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的两个焦点 API。它们的用法和实用场景有所不同，以下是它们的具体分析和利用方法。

ref

ref 用于创建一个响应式的基本类型或对象类型的数据。它会将数据包装在一个对象中，并通过 .value 访问或修改数据。
利用方法

• 基本类型：ref 通常用于基本类型（如 String、Number、Boolean 等）。
  
• 对象类型：ref 也可以用于对象类型，但更保举利用 reactive。
  

1. import { ref } from 'vue';
2. ​
3. // 创建一个响应式的基本类型数据
4. const count = ref(0);
5. ​
6. // 创建一个响应式的对象类型数据
7. const user = ref({
8.   name: 'Alice',
9.   age: 25
10. });
11. ​
12. // 访问和修改数据
13. console.log(count.value); // 0
14. count.value++; // 修改数据
15. ​
16. console.log(user.value.name); // Alice
17. user.value.age = 26; // 修改对象属性

复制代码

在模板中利用
在模板中，ref 的值可以直接利用，不需要加 .value。

1. <template>
2.  <div>
3.    <p>Count: {{ count }}</p>
4.    <button @click="count++">Increment</button>
5.  </div>
6. </template>
7. ​
8. <script setup>
9. import { ref } from 'vue';
10. ​
11. const count = ref(0);
12. </script>

复制代码

留意事项
在<script setup> 脚本中和在模板中利用不同，在脚本中利用时必须利用.value去访问和修改，在模板中利用时不需要加.value

在js脚本中修改变量时，必须利用.value去赋值修改。

1. import { ref } from 'vue'
2. const count = ref(0)
3. ​
4. console.log(count) // { value: 0 }
5. console.log(count.value) // 0
6. ​
7. count.value++
8. console.log(count.value) // 1

复制代码

不可以直接修改，错误示比方下：

1. import { ref } from 'vue'
2. const count = ref(0);
3. const str = ref('');
4. ​
5. count = 2;//这是错误的
6. str = "小明";//这是错误的

复制代码

reactive

英/riˈæktɪv/
reactive 用于创建一个响应式的对象（包罗数组）。它会递归地将对象的所有属性转换为响应式数据。
利用方法

• 对象类型：reactive 重要用于对象或数组。
  
• 基本类型：reactive 不能直接用于基本类型。
  

1. import { reactive } from 'vue';
2. ​
3. // 创建一个响应式的对象
4. const state = reactive({
5.   count: 0,
6.   user: {
7.    name: 'Alice',
8.    age: 25
9.   }
10. });
11. ​
12. // 访问和修改数据
13. console.log(state.count); // 0
14. state.count++; // 修改数据
15. ​
16. console.log(state.user.name); // Alice
17. state.user.age = 26; // 修改嵌套属性

复制代码

ref和reactive区别

• ref 实用于基本数据类型
  
• reactive 实用于对象或数组，尤其是嵌套对象。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。