文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

详解Vue3中ref和reactive函数的使用

2024-04-02 19:55

关注

前言

上一篇博文介绍 setup 函数的时候,最后出现一个问题,就是在 setup 函数中,编写一个事件,直接去修改定义的变量,发现页面上没有更新成功,并且控制台报错,那这篇博客就是讲解遇到的这个问题应该如何处理。

ref 函数介绍

ref 函数使用

使用 ref 函数很简单,首先要在页面引用,然后就可以直接使用了,具体怎么使用呢,下面为了方便介绍,简单来几个案例。

ref 函数处理基本数据类型

首先提一个需求:页面有一个名称需要显示,有一个按钮,点击按钮的时候修改页面展示的这个名字。

<template>
  <div>
    <h1>ref reactive 函数</h1>
    <h1>姓名:{{name_ref}}</h1>
    <el-button type="primary" @click="btn">修改名字</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'  // 引入 ref
  export default {
    setup() {
      const name = '??.'   // 创建一个变量为 ??.
      const name_ref = ref(name)   // ref 将参数包裹转换成响应式数据
      const btn = () => {   // 按钮点击修改名字
        name_ref = '我是??.'   // 将名字内容改为 我是??. 
      }
      return { name_ref, btn }  // 把页面需要使用的参数和方法抛出去
    }
  }
</script>

编写完上面的代码保存刷新,可以正常渲染数据,但是点击按钮修改名字的时候,出现问题!

为什么使用过 ref 将数据映射为响应式数据还是报错呢?我们可以先打印一下 ref 包裹后,也就是 name_ref 这个参数,看一下他的结构。

所以说修改代码:

<template>
  <div>
    <h1>ref reactive 函数</h1>
    <h1>姓名:{{name_ref}}</h1>
    <el-button type="primary" @click="btn">修改名字</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const name = '??.'
      const name_ref = ref(name)
      console.log(name_ref)
      const btn = () => {
        name_ref.value = '我是??.'  // 对响应式数据的value进行操作
      }
      return { name_ref, btn }
    }
  }
</script>

然后在保存代码刷新页面查看效果。

非常棒,数据完美的修改了。

有一点需要说一下哈,就是在单文件组件中,不必写value,因为setup方法会自动解析,简单的可以理解成 html 代码不需要额外操作 value,但是逻辑层需要。

ref 函数处理复杂数据类型

首先声明:不建议使用 ref 函数处理复杂数据类型(数组、对象等),用 ref 函数处理基本数据类型(数字、字符串等)就可以了。

例如我们写一个案例,创建一个个人信息,放到对象里面展示。

<template>
  <div>
    <h1>ref reactive 函数</h1>
    <h1>姓名:{{name_ref.name}}</h1>
    <h1>年龄:{{name_ref.age}}</h1>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '??.',
        age: 10
      }
      const name_ref = ref(boy)
      console.log(name_ref)
      return { name_ref }
    }
  }
</script>

我们先看一下对象被 ref 函数包裹后的数据结构。

所以说,对象而言,我们修改也是通过 value 进行操作。

<template>
  <div>
    <h1>ref reactive 函数</h1>
    <h1>姓名:{{name_ref.name}}</h1>
    <h1>年龄:{{name_ref.age}}</h1>
    <el-button type="primary" @click="btn">修改名字</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '??.',
        age: 10
      }
      const name_ref = ref(boy)
      console.log(name_ref)
      const btn = () => {
        name_ref.value.name = '我是??.'  // 对响应式数据的value进行操作
        name_ref.value.age = 11  // 对响应式数据的value进行操作
      }
      return { name_ref, btn }
    }
  }
</script>

保存代码,刷新页面,查看效果。

看到名称和年龄都被成功修改了。

当然了,对于数组的操作也是一样的啦!

<template>
  <div>
    <h1>ref reactive 函数</h1>
    <h1>姓名:{{name_ref[0]}}</h1>
    <h1>年龄:{{name_ref[1]}}</h1>
    <el-button type="primary" @click="btn">修改名字</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const boy = ['??.', 10]
      const name_ref = ref(boy)
      const btn = () => {
        name_ref.value[0] = '我是??.'  // 对响应式数据的value进行操作
        name_ref.value[1] = 11  // 对响应式数据的value进行操作
      }
      return { name_ref, btn }
    }
  }
</script>

保存查看,一样的效果。

ref 函数获取单个DOM元素

和 vue2 一样,可以使用 ref 获取元素,用法和操作数据类型相似。

页面上有一个标签,点击按钮,获取标签的相关数据。

<template>
  <div>
    <h1>ref reactive 函数</h1>
    <p style="color: blue;" ref="boy">我是??.</p>
    <el-button type="primary" @click="btn">获取元素</el-button>
  </div>
</template>
<script>
  import { ref, onMounted } from 'vue'
  export default {
    setup() {
      let boy = ref();
      const btn = () => {
        console.log(boy)
        console.log(boy.value)
        console.log(boy.value.innerText)
        console.log(boy.value.style.color)
      }
      return {boy, btn }
    }
  }
</script>

刷新查看运行效果。

其他相关方法

isRef

判断是否为 ref 对象。

<script>
  import { ref, isRef } from 'vue'
  export default {
    setup() {
      const a = ref('a')
      const b = 'b' 
      console.log(isRef(a))   // true
      console.log(isRef(b))   // false
    }
  }
</script>

unref

如果参数为 ref,则返回内部值,否则返回参数本身。

val = isRef(val) ? val.value : val

上边代码可以看懂吧?

<script>
  import { ref, unref } from 'vue'
  export default {
    setup() {
      const temp = ref(3)
      const newTemp = unref(temp) // newTemp 确保现在是数字类型 3
      const a = unref(1) // a 确保现在是数字类型 1
      console.log(newTemp, a)
    }
  }
</script>

好了,这是 ref 函数和与其常见的相关的其他函数相关的知识点内容,到此为止吧,有其他的可以自己在研究一下。

reactive 函数介绍

上面说了 ref 函数的基本用法,接下来是 reactive 函数,它的用法与 ref 函数的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新。不同的是 ref 用于基本数据类型,而 reactive 是用于复杂数据类型,所以说,不建议用 ref 函数来处理复杂数据类型的原因就是,有 reactive 来处理复杂类型数据。

reactive 函数使用

用完了 ref 函数,那 reactive 函数就很好理解了哈。

ref 函数处理对象

还是, reactive 函数用来处理数组或者是对象,我们还是写一个案例,操作人的基本信息。

我们还是先打印一下用 reactive 函数包裹后的数据结构。

<template>
  <div>
    <h1>ref reactive 函数</h1>
    <p>姓名:{{boy_reactive.name}}</p>
    <p>年龄:{{boy_reactive.age}}</p>
  </div>
</template>
<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '我是??.',
        age: 10
      }
      const boy_reactive = reactive(boy)
      console.log(boy_reactive)
      return { boy_reactive }
    }
  }
</script>

有打印的结果我们可以看见,这时候的数据就不是被包裹在 value 下面了,所以说我们可以直接获取到。

<template>
  <div>
    <h1>ref reactive 函数</h1>
    <p>姓名:{{boy_reactive.name}}</p>
    <p>年龄:{{boy_reactive.age}}</p>
    <el-button type="primary" @click="btn">修改信息</el-button>
  </div>
</template>
<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '我是??.',
        age: 10
      }
      const boy_reactive = reactive(boy)
      const btn = () => {
        boy_reactive.name = '??.'
        boy_reactive.age = 11
      }
      return { boy_reactive, btn }
    }
  }
</script>

保存刷新,查看效果。

ref 函数处理数组

处理数组的方式和处理对象的方式是一样一样的。

直接上代码:

<template>
  <div>
    <h1>ref reactive 函数</h1>
    <p>姓名:{{boy_reactive[0]}}</p>
    <p>年龄:{{boy_reactive[1]}}</p>
    <el-button type="primary" @click="btn">修改信息</el-button>
  </div>
</template>
<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const boy = ['我是??.', 10]
      const boy_reactive = reactive(boy)
      const btn = () => {
        boy_reactive[0] = '??.'
        boy_reactive[1] = 11
      }
      return { boy_reactive, btn }
    }
  }
</script>

我们可以看到效果是一样的。

以上就是详解Vue3中ref和reactive函数的使用的详细内容,更多关于Vue3 ref reactive的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯