温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue3中的ref、toRef、toRefs怎么使用

发布时间:2023-04-14 10:13:16 来源:亿速云 阅读:132 作者:iii 栏目:编程语言

这篇文章主要讲解了“vue3中的ref、toRef、toRefs怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3中的ref、toRef、toRefs怎么使用”吧!

一、ref

ref 函数,可以把简单数据类型包裹为响应式数据(复杂类型也可以),注意 JS 中操作值的时候,需要加 .value 属性,模板中正常使用即可。
举个例子:

  • ref包装基本类型数据
    App.vue

<template>
  <div class="container">
      <div>{{ name }}</div>
      <button @click="updateName">修改数据</button>
  </div></template><script>
  import { ref } from 'vue'
  export default {
      name: 'App',
      setup() {
          const name = ref('初映')
          const updateName = () => {
              name.value = '初映CY的前说'
          }
          return { name, updateName }
      },
  }</script>

vue3中的ref、toRef、toRefs怎么使用
可看见写法与reactive()一样,不过是在js中书写的时候需要额外加一个.value即可。

  • ref包装复杂类类型数据
    注意:ref 其实也可以包裹复杂数据类型为响应式数据,一般对于数据类型未确定的情况下推荐使用 ref,例如后端返回的数据。

<template>
    <div class="container">
        <div>{{ data?.name }}</div>
        <button @click="updateName">修改数据</button>
    </div></template><script>
    import { ref } from 'vue'
    export default {
        name: 'App',
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右边的对象可能是后端返回的
                data.value = {
                    name: '初映',
                }
            }, 1000)
            const updateName = () => {
                data.value.name = 'CY'
            }
            return { data, updateName }
        },
    }</script>

vue3中的ref、toRef、toRefs怎么使用

  • 如何选择?
    ref()和reactive()都是Vue.js3.0中提供的两个响应式API。
    ref()主要用于创建一个响应式数据,它会将一个普通的JavaScript对象转换为一个响应式的对象,从而使数据的变化可以被Vue实例所追踪,当数据发生变化时,Vue会自动更新相关视图。ref()创建的响应式数据可以通过.value属性来访问和修改。
    reactive()则主要用于创建一个响应式对象,可以用作包含多个值的状态对象,通常用于管理复杂的状态。它可以将一个普通的JavaScript对象转换为一个响应式对象,并且支持嵌套属性,即使嵌套属性发生变化也会被Vue实例所追踪。当响应式对象中有任何一个属性发生变化时,Vue也会自动更新相关的视图。
    当你明确知道需要包裹的是一个对象,那么推荐使用 reactive,其他情况使用 ref 即可。
    Vue3.2 之后,更推荐使用 ref,性能得到了很大的提升。

二、toRef

toRef 函数的作用:转换响应式对象中某个属性为单独响应式数据,并且转换后的值和之前是关联的(ref 函数也可以转换,但值非关联)。
先看下面这个例子:

<template>
  <div class="container">
      <h3>name: {{ obj.name }} age: {{obj.age}}</h3>
      <button @click="updateName">修改数据</button>
  </div></template><script>
  import { reactive } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 18,
              address: '江西',
              sex: '男',
          })
          const updateName = () => {
              obj.name = '初映CY的前说'
          }
          return { obj, updateName }
      },
  }</script>

vue3中的ref、toRef、toRefs怎么使用
这样写也可以将数据进行更改成为响应式的数据,但是带来了两个问题:

  • 问题 1:模板中都要使用 obj. 进行获取数据,麻烦。

  • 问题 2:明明模板中只用到了 name 和 age,却把整个 obj 进行了导出,没必要,性能浪费。

<template>
  <div class="container">
      <h3>name: {{ name }} </h3>
      <button @click="updateName">修改数据</button>
  </div></template><script>
  import { reactive,toRef  } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 18,
              address: '江西',
              sex: '男',
          })
          const name = toRef(obj, 'name')
          const updateName = () => {
              obj.name = '初映CY的前说'
          }
          return { name, updateName }
      },
  }</script>

这样把我们需要的数据放进return即可,节约了性能与在模板中的写法,有点点了‘按需导入’的意思

三、torefs

toRefs 函数的作用:转换响应式对象中所有属性为单独响应式数据,并且转换后的值和之前是关联的。

<template>
  <div class="container">
      <h3>{{ name }} {{ age }}</h3>
      <button @click="updateName">修改数据</button>
  </div></template><script>
  import { reactive, toRefs } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 10,
          })
          const updateName = () => {
              obj.name = '初映CY的前说'
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }</script>

vue3中的ref、toRef、toRefs怎么使用
toRefs将我们所有的响应式数据都进行return出去了,届时直接用上数据名称即可,记得加上…喔

感谢各位的阅读,以上就是“vue3中的ref、toRef、toRefs怎么使用”的内容了,经过本文的学习后,相信大家对vue3中的ref、toRef、toRefs怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI