目录
数据响应式
如何使用
reactionyu区别
数据响应式
什么是数据响应式
简单来说就是当数据变了的时候，页面的展示也会跟着发生变化。
在Vue当中我们有两个函数可以实现这个功能reaction，ref
如何使用
首先这两个函数在是在Vue对象中我们可以先对对象做解构，拿到两个函数在去setup函数中做对应处理
reactionyu区别
reaction只能对对象做响应式，而ref可以对对象和各种数据(字符串，整形，数组等)做相应式，但是，ref响应式的数据在javascript中需要先.value，在标签中不需要。这里有一块代码的对比
javascript"><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
起始选谁都没有一个明确的说法，最重要的还是看自己的喜好
