setup+ref+reactive实现vue3响应式功能

 更新时间:2021年11月24日 08:32   作者:前端人
这篇文章介绍了通过setup+ref+reactive实现vue3响应式功能,文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

一、ref

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

示例1:ref 使用

<template>
 <div>
  <input type="text" v-model="mood">
  {{mood}}
 </div>
</template>
<script>
import { ref } from "vue"
export default{
 setup(){
  let mood = ref("此时心情好差呀!")
  setTimeout(()=>{
   mood.value = "心情要变的像人一样美"
  },3000)
  return{
   mood
  }
 }
}
</script>

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

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

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

二、reactive

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

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

let me = reactive({
 single:true,
 want:"暖的像火炉的暖男"
})

// 运行结果为
let me = proxy : { single: true, want:"暖的像火炉的暖男" }

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

示例2:reactive 使用

<template>
 <div>
  {{me.want}}
 </div>
</template>
<script>
import { ref , reactive } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"暖的像火炉的暖男"
  })
  setTimeout(()=>{
   me.want = "夏天容易化了"
  },3000)
  return{
   me
  }
 }
}
</script>

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

三、toRefs 、toRef 应用

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

它的工作原理为:

import { ref , reactive, toRefs } from "vue"
let me = reactive({
 single:true,
 want:"暖的像火炉的暖男"
})
//运行为
let me = proxy : { single: true, want:"暖的像火炉的暖男" }

const { single, want } = toRefs( me )
// 运行为
single : proxy({ value:true })
want : proxy({ value:"暖的像火炉的暖男" })

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

示例3:toRefs 解构数据

<template>
 <div>
  {{want}}
  <input type="text" v-model="want">
 </div>
</template>
<script>
import { ref , reactive, toRefs } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"暖的像火炉的暖男"
  })
  setTimeout(()=>{
   me.want = "夏天容易化了"
  },3000)
  // 解构
  const {single,want} = toRefs(me)
   return{
    single,
    want
   }
  }
}
</script>

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

let me = reactive({
 single:true,
 want:"暖的像火炉的暖男"
})
let lv = toRef( me, 'love' )
console.log('love',love);
//打印结果
ObjectRefImpl {
 __v_isRef: true
 _key: "love"
 _object: Proxy {single: true, want: "暖的像火炉的暖男"}
 value: undefined
 [[Prototype]]: Object
}

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

示例4:toRef 使用

<template>
 <div>
  {{want}}
 <input type="text" v-model="want">
</div>
</template>
<script>
import { ref , reactive, toRefs, toRef } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"暖的像火炉的暖男"
  })
 setTimeout(()=>{
  me.want = "夏天容易化了"
 },3000)
 const {single,want } = toRefs(me)
 const love = toRef(me,'love')
 console.log('love',love);
 return{
  single,
  want
  }
 }
}
</script>

四、总结

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

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

以上所述是小编给大家介绍的通过setup+ref+reactive实现vue3响应式功能,希望对大家有所帮助。在此也非常感谢大家对猪先飞网站的支持!

原文出处:https://www.cnblogs.com/web-learn/p/15587084.html

相关文章

  • vue3源码剖析之简单实现方法

    源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
  • 浅谈vue2的$refs在vue3组合式API中的替代方法

    这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
  • vue3弹出层V3Popup实例详解

    这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
  • Vue3 编译流程-源码解析

    今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
  • vue3封装放大镜组件的实例代码

    这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
  • 40行代码把Vue3的响应式集成进React做状态管理

    这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
  • 浅谈Vue3的几个优势

    这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
  • 利用Vue3 创建Vue CLI 项目(一)

    这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
  • Vue3 响应式侦听与计算的实现

    这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
  • 详解vue3 沙箱机制

    这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
  • 使用Vue3进行数据绑定及显示列表数据

    这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
  • Vue3中reactive函数toRef函数ref函数简介

    这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
  • 手摸手教你实现Vue3 Reactivity

    本文主要介绍了手摸手教你实现Vue3 Reactivity,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-25
  • Vue3 AST解析器-源码解析

    这篇文章我们从 ast 生成时调用的 baseParse 函数分析,再到 baseParse 返回 createRoot 的调用结果,一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下...2021-09-25
  • vue3缓存页面keep-alive及路由统一处理详解

    当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下...2021-10-17
  • vue3如何使用provide实现状态管理详解

    Vue3中有一对新增的api,provide和inject,熟悉Vue2的朋友应该明,这篇文章主要给大家介绍了关于vue3如何使用provide实现状态管理的相关资料,需要的朋友可以参考下...2021-10-17
  • vue3单文件组件中style特性的深入讲解

    单文件就是把一个页面拆分为多个,多层次的组件,通过多层引用,大大缩小vue文件的长度和页面复杂度,下面这篇文章主要给大家介绍了关于vue3单文件组件中style特性的相关资料,需要的朋友可以参考下...2021-09-06
  • 利用vue3+ts实现管理后台(增删改查)

    这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
  • Vue3.0中Ref与Reactive的区别示例详析

    在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下...2021-07-07
  • 如何利用vue3实现放大镜效果实例详解

    最近有项目需要用到对图片进行局部放大,类似淘宝商品页的放大镜效果,经过一番研究功能可用,下面这篇文章主要给大家介绍了关于如何利用vue3实现放大镜效果的相关资料,需要的朋友可以参考下...2021-09-20