目录
数据响应式
如何使用
reactionyu区别
数据响应式
什么是数据响应式
简单来说就是当数据变了的时候，页面的展示也会跟着发生变化。
在Vue当中我们有两个函数可以实现这个功能reaction，ref
如何使用
首先这两个函数在是在Vue对象中我们可以先对对象做解构，拿到两个函数在去setup函数中做对应处理
reactionyu区别
reaction只能对对象做响应式，而ref可以对对象和各种数据(字符串，整形，数组等)做相应式，但是，ref响应式的数据在javascript中需要先.value，在标签中不需要。这里有一块代码的对比
<body>
<div class="app">
<p>{{obj.message}}今年{{obj.age}}岁</p>
<!-- 这里的ref函数将字符串转化为响应式对象，在标签中可以直接使用其属性 -->
<p>这是{{obj2.tool}}需要{{obj2.price}}元，你好{{say.value}}</p>
</div>
<script>
//接收Vue构造函数以及reactive函数,ref函数
const { createApp, reactive, ref } = Vue;
createApp({
//setup 程序入口函数
setup() {
//reactive 函数将对象转化为响应式对象
const obj = reactive({
message: "钟哥无敌",
age: 25,
});
//ref 函数将字符串化为响应式对象
const say = ref("你好");
//ref 函数将对象化为响应式对象
const obj2 = ref({ tool: "锤子", price: 10000 });
//ref响应式对象需要通过.value来修改响应式对象
obj2.value.price = 20000;
//返回响应式对象
return { obj,say,obj2 };
}
}).mount(".app")//挂载到div上
</script>
</body>reactive与ref的选择
1.reactive 只接收对象作为参数，不⽀持简单数据类型。
2.ref 既可以接收基本类型，也可以接收引⽤类型，但在操作的时候需要 .value
3.如果数据是对象、并且字段名称也确定，推荐使⽤ reactive 赋予数据响应式，其他⼀律使⽤
ref
起始选谁都没有一个明确的说法，最重要的还是看自己的喜好
