Vue3 学习笔记 —Vue3 的Setup 如何实现响应式功能？

setup 是用来写组合式 api ，内部的数据和方法需要通过 return 之后，模板才能使用。在之前 vue2 中，data 返回的数据，可以直接进行双向绑定使用，如果我们把 setup 中数据类型直接双向绑定，发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能?

一、ref

setup 内的自定义属性不具备响应式能力，所以引入了 ref ，ref 底层通过代理，把属性包装值包装成一个 proxy ，proxy 内部是一个对象，使得基础类型的数据具备响应式能力，使用之前必须引入。

示例1：ref 使用

1. <template> 
2.  <div> 
3.   <input type="text" v-model="mood"> 
4.   {{mood}} 
5.  </div> 
6. </template> 
7. <script> 
8. import { ref } from "vue" 
9. export default{ 
10.  setup(){ 
11.   let mood = ref("此时心情好差呀！") 
12.   setTimeout(()=>{ 
13.    mood.value = "心情要变的像人一样美" 
14.   },3000) 
15.   return{ 
16.    mood 
17.   } 
18.  } 
19. } 
20. </script> 

此时可以在 setup 模板内任意编辑 mood，可以保证实时响应。实例在修改 mood 的值加了 value ，是因为 ref 的工作原来：

let mood = ref("此时心情好差呀!")

修改成 ：let mood = proxy({value:"此时心情好差呀!"})

二、reactive

上述的 ref 让基础数据类型具备了响应式，但是如果我们换成引用类型的数据，就会失效。所以引入了 reactive。

reactive 通过底层包装，将引用类型数据包装到 proxy 内，使用原理如：

1. let me = reactive({ 
2.  single:true, 
3.  want:"暖的像火炉的暖男" 
4. }) 
5.  
6. // 运行结果为 
7. let me = proxy : { single: true, want:"暖的像火炉的暖男" } 

引用的时候，直接使用 me.want 就可以了。

示例2：reactive 使用

1. <template> 
2.  <div> 
3.   {{me.want}} 
4.  </div> 
5. </template> 
6. <script> 
7. import { ref , reactive } from "vue" 
8. export default{ 
9.  setup(){ 
10.   let me = reactive({ 
11.    single:true, 
12.    want:"暖的像火炉的暖男" 
13.   }) 
14.   setTimeout(()=>{ 
15.    me.want = "夏天容易化了" 
16.   },3000) 
17.   return{ 
18.    me 
19.   } 
20.  } 
21. } 
22. </script> 

通过 setup + ref + reactive 就可以完全实现 vue2 中 data 的响应式功能，所以 setup 完全可以替换掉 data。

三、toRefs 、toRef 应用

setup + ref + reactive 实现了数据响应式，不能使用 ES6 解构，会消除响应特性。所以需要 toRefs 解构，使用时，需要先引入。

它的工作原理为：

1. import { ref , reactive, toRefs } from "vue" 
2. let me = reactive({ 
3.  single:true, 
4.  want:"暖的像火炉的暖男" 
5. }) 
6. //运行为 
7. let me = proxy : { single: true, want:"暖的像火炉的暖男" } 
8.  
9. const { single, want } = toRefs( me ) 
10. // 运行为 
11. single : proxy({ value:true }) 
12. want : proxy({ value:"暖的像火炉的暖男" }) 

toRefs 把 single 和 want 解构成两个 proxy ，所以是响应式的。

示例3：toRefs 解构数据

1. <template> 
2.  <div> 
3.   {{want}} 
4.   <input type="text" v-model="want"> 
5.  </div> 
6. </template> 
7. <script> 
8. import { ref , reactive, toRefs } from "vue" 
9. export default{ 
10.  setup(){ 
11.   let me = reactive({ 
12.    single:true, 
13.    want:"暖的像火炉的暖男" 
14.   }) 
15.   setTimeout(()=>{ 
16.    me.want = "夏天容易化了" 
17.   },3000) 
18.   // 解构 
19.   const {single,want} = toRefs(me) 
20.    return{ 
21.     single, 
22.     want 
23.    } 
24.   } 
25. } 
26. </script> 

toRef作用：将对象某一个属性，作为引用返回。比较难理解，可以打印查看下结果更容易理解。

1. let me = reactive({ 
2.  single:true, 
3.  want:"暖的像火炉的暖男" 
4. }) 
5. let lv = toRef( me, 'love' ) 
6. console.log('love',love); 
7. //打印结果 
8. ObjectRefImpl { 
9.  __v_isRef: true 
10.  _key: "love" 
11.  _object: Proxy {single: true, want: "暖的像火炉的暖男"} 
12.  value: undefined 
13.  [[Prototype]]: Object 
14. } 

toRef 是组件之间进行传值值，对可选参数进行处理，运行时，先查看 me中是否存在 love ，如果存在时就继承 me 中的 love ，如果不存在时就创建一个 love ，然后解构赋值给变量 lv。

示例4：toRef 使用

1. <template> 
2.  <div> 
3.   {{want}} 
4.  <input type="text" v-model="want"> 
5. </div> 
6. </template> 
7. <script> 
8. import { ref , reactive, toRefs, toRef } from "vue" 
9. export default{ 
10.  setup(){ 
11.   let me = reactive({ 
12.    single:true, 
13.    want:"暖的像火炉的暖男" 
14.   }) 
15.  setTimeout(()=>{ 
16.   me.want = "夏天容易化了" 
17.  },3000) 
18.  const {single,want } = toRefs(me) 
19.  const love = toRef(me,'love') 
20.  console.log('love',love); 
21.  return{ 
22.   single, 
23.   want 
24.   } 
25.  } 
26. } 
27. </script> 

四、总结

ref 让基础数据类型具备响应式，而 reactive 让引用类型的数据具备响应式。setup + ref + reactive 完全实现 vue2 中 data 响应式功能。

toRefs 解构 reactive 包装的数据，toRef 用于对可选参数。

原文链接：https://www.toutiao.com/a7031081837829161503/