Vue中的ref、toRef与toRefs怎么使用

这篇文章主要介绍了Vue中的ref、toRef与toRefs怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中的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>

可看见写法与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>

如何选择？

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>

这样写也可以将数据进行更改成为响应式的数据，但是带来了两个问题：

问题 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>

toRefs将我们所有的响应式数据都进行return出去了，届时直接用上数据名称即可，记得加上…喔

关于“Vue中的ref、toRef与toRefs怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue中的ref、toRef与toRefs怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。