服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - Vue3 学习笔记 —Vue3 的Setup 如何实现响应式功能?

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

2021-12-02 22:59前端人 JavaScript

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

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

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 用于对可选参数。

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

延伸 · 阅读

精彩推荐