vue reactive ref,vue3.0 ref reactive
在vue3中，有两种正式的方法来声明响应数据：ref()和reactive()。以下文章主要介绍了Vue3中ref和reactive的相关信息，有需要的可以参考一下。
目录
I、ref和reactive1.reactive2.ref
二。shallowRef和shallowReactive1。ref和shallowRef2。反应性和浅反应性III、toRaw IV、markRaw V、toRef和toRef
1.裁判员
2.总结2。toRef3。托雷夫斯
一、ref和reactive
记住：ref本质上也是电抗，ref(obj)等价于reactive({value: obj})
vue3中实现响应式数据的方法是使用ref和reactive。所谓响应式数据，就是接口和数据的同步，可以实现实时更新。
vue2中的响应由defineProperty实现，vue3中由ES6的代理实现。
1.reactive
reactive的参数必须是对象，包括json数据和数组，否则没有响应。
如果将其他对象(如时间对象)传递给reactive，默认情况下修改对象的界面不会自动更新。如果要更新，可以通过重新指定对象来解决。
2.ref
既然我们有电抗，为什么还需要ref？当我们只希望一个变量是响应式的时候，采用反应式会很麻烦。所以vue3提供了ref方法来监控简单值，但并不意味着ref只能传入简单值。他的底层是反应性的，所以他都有。还是那句老话：
记住：ref本质上也是电抗，ref(obj)等价于reactive({value: obj})
使用vue中ref的值，而不是让它通过。价值。
js中使用的ref的值必须通过。价值。
二、shallowRef和shallowReactive
递归监视和非递归监视
而ref reactive属于递归监控，即每一层数据都是有响应的。如果数据量很大，消耗很多性能，非递归监控只会监控第一层数据。
1. ref和shallowRef
ref定义的每一层数据都是响应式数据。
只有lowref定义的数据的第一层是有响应的，也就是说，它只能在。值已更改。
设年龄=ref({
答：“1”，
女：{
乙： 二，
斯：{
丙：“3”
}
}
})
//打印各层数据
console.log(年龄)；
console . log(age . value)；
console . log(age . value . f)；
console . log(age . value . f . s)；
设age=shallowRef({
答：“1”，
女：{
乙： 二，
斯：{
丙：“3”
}
}
})
//打印各层数据
console.log(年龄)；
console . log(age . value)；
console . log(age . value . f)；
console . log(age . value . f . s)；
使用shallowRef后，可以通过triggerRef()方法主动更新界面，刷新界面。
函数doSome(){
age . value . f . s . c= c ；
//主动更新界面
triggerRef(年龄)；
}
2. reactive和shallowReactive
注意：shallowReactive没有类似triggerRef()的方法
三、toRaw
托拉解决了什么问题？
有时，我们不希望数据以响应方式实时更新。我们可以通过toRaw获得ref或reactive引用的原始数据。通过修改原始数据，界面不会更新。只有修改ref和reactive封装的数据，接口才会有响应性的变化。
设obj1={.};
//state和obj1是引用关系，state的本质是一个代理对象，其中引用了obj1。
设状态=无功(obj 1)；
toRaw方法得到的原始数据其实是obj1的内存地址，obj2和obj1完全相等。
设obj2=toRaw(州)
console . log(obj 1===obj 2)；//真
有同学会问，直接用obj1修改数据不行吗？但关键的一点是，我们在使用reactive定义数据时，一般不会先定义一个obj，然后再传递给reactive。我们都是直接用reactive写数据。
四、markRaw
与toRaw不同，markRaw的打包数据永远不会被跟踪！
暂时没发现有什么用(手动狗头)
让obj1={姓名：李静，年龄：18}
设obj 2=markRaw(obj 1)；
//此时，虽然reactive所包装的数据是一个响应式对象，但不会被跟踪，也不会产生效果效应。
设状态1=电抗(obj2)
console . log(obj 1===obj 2)；//真
五、toRef和toRefs
ref和toRef都用于构造响应数据。两者有什么区别？看两个例子。
1. ref
复制修改响应式数据不会影响之前的数据，数据发生变化时界面会自动更新。
转换的是RefImpl类型。
可以看出，在用ref响应性地修改对象的简单数据类型属性之后，原始数据将不会受到修改响应数据的影响。如上图所示，obj1中属性A的值在state1修改值后没有变化。这里有一个注意：修改的属性必须是一个简单的数据类型，一个特定的值，而不是一个引用。如果属性也是一个对象，它将受到影响，因为对象引用！
比如上面的例子，如果obj1.f被传入state1，情况就完全不一样了。
//等效于let state1=ref ({b: 2 ，s: {c: 3}})
//它相当于-let state1=reactive ({value: {.}})
设state 1=ref(obj 1 . f)；
2. toRef
如果使用toRef进行转换，修改响应数据会影响原始数据，数据会发生变化，但界面不会自动更新。
转换后，它是ObjectRefImpl类型。
Ref类似于深度复制，toref类似于浅层复制。
3. toRefs
遍历对象中的所有属性，把它变成响应数据，因为toRef只能传递一个键，toRef和toRef的作用是一样的。
温馨提示：目前最常用的是ref和reactive，其他的一般在后面用，提高性能。
总结
关于Vue3 ref和reactive的这篇文章就到这里了。有关Vue3 ref和reactive的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。