我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结

不知道有没有和我一样,看见那么多带ref的慢慢就晕了,所以写一个简单的总结吧嘿嘿

一、ref reactive

1.1.为什么需要ref、reactive

⭐⭐⭐
setup 函数中默认定义的变量并不是响应式的(即数据变了以后页面不会跟着变),如果想让变量变为响应式的变量,需要使用 ref reactive 函数修饰变量。

  • ref 函数可以把基本类型变量变为响应式引用
  • reactive 函数可以把复合类型的变量变为响应式的引用。

 1.2.ref reactive基本使用

ref

  • ref用于为数据添加响应式状态
  • 获取数据值需要加.value
  • 因为reactive只能传入对象类型的参数,所以基本数据类型添加响应式状态只能用ref(ref也可以定义复杂的数据哦~)

1.引入ref

2.使用ref

查阅资料发现:ref底层使用的是proxy代理函数实现双向绑定,proxy 函数必须要接收一个对象,如果想修改 name 的值,需要使用 name.value。(这个很重要的

reactive:

1.引入reactive

2.使用reactive

更推荐使用ref(当然要分情况的)

二、toRef、toRefs

⭐⭐⭐
toRef:

  • 只希望转换一个reactive对象中的属性为ref, 那么可以使用toRef的方法:
  • 获取数据值需要加.value

toRefs

  • 使用ES6的解构语法,因为一个响应式对象直接结构时,结构后的数据不再具有响应式
  • Vue为我们提供了一个toRefs的函数,可以将reactive返回的对象中的属性都转成ref;

基本使用:

选一个使用就可以,不然会很乱

 三、$refs

⭐⭐⭐⭐⭐

$refs:直接获取到元素对象或者子组件实例

  • 在Vue中,我们可以给元素或者组件绑定一个ref的attribute属性;(不推荐进行DOM操作)
  • 在js中:通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值
  • 在vue中,元素绑定ref后,直接通过this.$refs就可以调用。这样可以减少获取dom节点的消耗

1.在元素中

在元素中绑定一个ref的attribute属性

通过this.$refs就可以调用

在组件中

子组件

父组件调用子组件的对象方法、获取组件实例和元素

简单描述vue3中ref、reactive、toRef、toRefs区别

ref:ref用于创建基础数据类型的响应式变量(采用复制的方式,修改响应式数据不会影响原始数据,数据发生改变,界面就会自动更新)

setup(){
    const refA = ref(0)
}

reactive:reactive用于创建引用类型的响应式对象

setup(){
    const refA = reactive({
        name: "LISA",
        age: "36"
    })
}

toRef: toRef接收两个参数target和attr,target是一般是reactive的响应式对象,attr是对象的属性,返回响应式变量(采用引用的方式,修改响应式数据,会影响原始数据,并且数据发生改变)

setup(){
    const object = reactive({ name: "LISA", age: "36" })
    const refA = toRef(object, name) 
}

toRefs: 将响应式reactive对象转换为普通对象,多用于响应式对象转为普通对象后解构(对象中的数据依旧是响应式)

setup(){
    const refA = reactive({
        name: "LISA",
        age: "36"
    })
    return{
        ...toRefs(refA) 
    }
    // 相当于return了 name: ref("LISA"),age: ref("36")
}

总结

到此这篇关于Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结的文章就介绍到这了,更多相关Vue中ref reactive toRef toRefs $refs内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结

这篇文章主要给大家介绍了关于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他们之家的区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-13

VUE中$refs的基本用法举例

ref加在子组件上,用this.$refs.(ref值)获取到的是组件实例,可以使用组件的所有方法, 在使用方法的时候直接this.$refs.(ref值).方法()就可以使用了,这篇文章主要介绍了VUE中$refs的基本用法,需要的朋友可以参考下
2022-12-19

MySQL中case when的两种基本用法及区别总结

在mysql中casewhen用于计算条件列表并返回多个可能结果表达式之一,下面这篇文章主要给大家介绍了关于MySQL中case when的两种基本用法及区别的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-05-18

MySQL中case when的两种基本用法及区别总结

mysql中的case when有用两种用法,官方文档中的说明如下:用法一:CASE case_valueWHEN when_value THEN statement_list[WHEN when_value THEN statemen
2023-05-05

编程热搜

目录