【vue3】关于ref、toRef、toRefs那些事

【vue3】关于ref、toRef、toRefs那些事
😉博主：初映CY的前说(前端领域) 📒本文核心：ref、toRef、toRefs的使用方法

【前言】我们在上一节的学习当中，使用了reactive()函数将vue3中的数据变成响应式的数据，本文中所讲的三个方法也能实现将数据转化为响应式数据。话不多说,让我们来学习下这三个方法怎么用，以及与reactive的区别。

目录

  • ⭐一、ref
  • ⭐二、toRef
  • ⭐三、torefs

⭐一、ref

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

<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即可

<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那些事

⭐二、toRef

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

<template>
  <div class="container">
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <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那些事
这样写也可以将数据进行更改成为响应式的数据，但是带来了两个问题：

<template>
  <div class="container">
      <h2>name: {{ name }} </h2>
      <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">
      <h2>{{ name }} {{ age }}</h2>
      <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出去了，届时直接用上数据名称即可，记得加上…喔

至此本文结束，愿你有所收获！
期待大家的关注与支持! 你的肯定是我更新的最大动力！！！

标签 , ,

发表回复