vue3中toRef、toRefs和toRaw的使用

尚斌

1.toRef

toRef 的作用是将一个响应式对象中的

1. 属性

复制代码

转换成单独的响应式引用。转换后的响应式引用会

1. 跟踪原始属性

复制代码

的变化。转换后的响应式可以被用于

1. 计算属性

复制代码

及

1. 监听器

复制代码

中。
如果原始对象是非响应式的则不会更新视图，数据会改变。
接收两个参数：

• 参数一：原始对象；
  
• 参数二：属性。
  

1. <template>
   
2.   <div>
   
3.     {{ man }}
   
4.   </div>
   
5.   <br />
   
6.   <div>
   
7.     <button @click="change">点击</button>
   
8.   </div>
   
9. </template>
   
10. 
    
11. <script setup lang="ts">
    
12. import { toRef, toRefs, reactive, toRaw } from 'vue'
    
13. 
    
14. const man = reactive({ name: '张三', age: 18, like: '唱' })
    
15. const like = toRef(man, 'like')
    
16. const change = () => {
    
17.   man.age = 19
    
18.   like.value = '跳'
    
19.   console.log(man)
    
20. }
    
21. </script>

复制代码

点击前页面：

点击后结果：

2.toRefs

1.  toRefs 将一个对象的所有属性变成响应式引用，追踪原对象的引用关系。

复制代码

原始对象如果是响应式的，则当修改属性值时，数据和视图都会更新；原对象如果非响应式，则修改属性值时，数据会更新，视图不更新。
接收一个参数：原始对象。

1. <template>
   
2.   <div>
   
3.     {{ man }}
   
4.   </div>
   
5.   <br />
   
6.   <div>
   
7.     <button @click="change2">点击2</button>
   
8.   </div>
   
9. </template>
   
10. 
    
11. <script setup lang="ts">
    
12. import { toRef, toRefs, reactive, toRaw } from 'vue'
    
13. 
    
14. const man = reactive({ name: '张三', age: 18, like: '唱' })
    
15. const { name, age } = toRefs(man)
    
16. const change2 = () => {
    
17.   name.value = '李四'
    
18.   age.value = 20
    
19. }
    
20. </script>
    
21. 
    
22. <style scoped></style>

复制代码

点击前页面：

点击后结果：

3.toRaw

1.  toRaw 将一个响应式对象变成非响应式。修改属性值时，数据会改变，视图不会更新。

复制代码

接受一个参数：原始对象。

1. <template>
   
2.   <div>
   
3.     {{ man }}
   
4.   </div>
   
5.   <br />
   
6.   <div>
   
7.     <button @click="change3">点击3</button>
   
8.   </div>
   
9. </template>
   
10. 
    
11. <script setup lang="ts">
    
12. import { toRef, toRefs, reactive, toRaw } from 'vue'
    
13. 
    
14. const man = reactive({ name: '张三', age: 18, like: '唱' })
    
15. const change3 = () => {
    
16.   // 手写toRaw
    
17.   console.log(man['__v_raw'])
    
18.   // 调用toRaw
    
19.   console.log(toRaw(man))
    
20. }
    
21. </script>

复制代码

点击前与点击后页面：

点击后结果：

到此这篇关于vue3中toRef、toRefs和toRaw的使用的文章就介绍到这了,更多相关vue3 toRef toRefs toRaw内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/32105093a.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！