标签：userAge 对象 数据类型 用法 increase reactive user vue3

reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组
例如：定义一个对象类型的变量user

<template>
<div>
<p>{{ user }}</p>
<button @click="increase">click me! one year later</button>
</div>
</template>

<script>
import { reactive } from "vue";
export default {
name: "reactive",
setup() {
const user = reactive({ name: "Alice", age: 12 });
function increase() {
++user.age
}
return { user, increase };
},
};
</script>

如上，当点击按钮时，让数据user.age加1，当Vue发现数据发生变化，UI会自动更新
那我们验证了，确实reactive函数可以将一个复杂数据类型变成响应式数据。我们不妨将reactive函数执行的结果打印出来看下，看看它返回值是什么
reactive将传递的对象包装成了proxy对象

我们发现，reactive执行结果是将传递的对象包装成了proxy对象
接下来我们测试一下，如果传递基本数据类型呢？

<template>
<div>
<p>{{ userAge }}</p>
<button @click="increase">click me! one year later</button>
</div>
</template>

<script>
import { reactive } from "vue";
export default {
name: "reactive",
setup() {
let userAge = reactive(12);
function increase() {
console.log(userAge);
++userAge;
}
return { userAge, increase };
},
};
</script>

运行发现，基本数据传递给reactive，reactive并不会将它包装成porxy对象，并且当数据变化时，界面也不会变化

需要注意的是，reactive中传递的参数必须是json对象或者数组，如果传递了其他对象（比如new Date()），在默认情况下修改对象，界面不会自动更新，如果也需要具有响应式，可以通过重新赋值的方式实现

使用ref函数可以处理基本数据，使期变成响应式数据

标签：userAge,对象,数据类型,用法,increase,reactive,user,vue3
来源： https://www.cnblogs.com/onesea/p/15540978.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。