一、refref 函数，可以把简单数据类型包裹为响应式数据（复杂类型也可以），注意 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即可。【相关推荐：vuejs视频教程、web前端开发】
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，性能得到了很大的提升。二、toreftoref 函数的作用：转换响应式对象中某个属性为单独响应式数据，并且转换后的值和之前是关联的（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>
这样写也可以将数据进行更改成为响应式的数据，但是带来了两个问题：
问题 1：模板中都要使用 obj. 进行获取数据，麻烦。
问题 2：明明模板中只用到了 name 和 age，却把整个 obj 进行了导出，没必要，性能浪费。
<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即可，节约了性能与在模板中的写法，有点点了‘按需导入’的意思
三、torefstorefs 函数的作用：转换响应式对象中所有属性为单独响应式数据，并且转换后的值和之前是关联的。
<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>
torefs将我们所有的响应式数据都进行return出去了，届时直接用上数据名称即可，记得加上…喔
据。话不多说,让我们来学习下这三个方法怎么用，以及与reactive的区别。
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是一文聊聊vue3中的ref、toref、torefs的详细内容。