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

开发 前端
setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用。接下来就看看setup如何实现data的响应式功能?

[[437987]]

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. </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. </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. </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. </script> 

四、总结

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

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

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-12-01 08:11:44

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-12-06 07:43:56

Vue如何定义事件

2022-06-26 00:00:02

Vue3响应式系统

2021-11-16 08:50:29

Vue3 插件Vue应用

2021-12-08 09:09:33

Vue 3 Computed Vue2

2023-12-11 07:34:37

Computed计算属性Vue3

2021-09-27 06:29:47

Vue3 响应式原理Vue应用

2021-12-29 07:51:21

Vue3 插件Vue应用

2022-02-18 09:39:51

Vue3.0Vue2.0Script Set

2023-04-27 11:07:24

Setup语法糖Vue3

2022-01-19 18:05:47

Vue3前端代码

2020-09-19 21:15:26

Composition

2022-03-10 11:04:04

Vue3Canvas前端

2024-01-23 09:15:33

Vue3组件拖拽组件内容编辑

2023-12-14 08:25:14

WatchVue.js监听数据

2021-12-15 08:23:42

Vue3 插件Vue应用

2024-02-01 09:10:04

页面引导工具Vue3

2023-02-06 08:39:01

PreactVue3响应式
点赞
收藏

51CTO技术栈公众号