toRef和toRefs的区别

Vue3中还有一个API名为toRef，它可以让我们在reactvie创建的响应式对象里面提取到一的指定属性，并且这个属性会被转化成一个ref（响应式数据），并且提取出来的属性和原reacttive数据是一个引用关系。

toRef和toRefs 类似都可以用来解构响应式对象，区别就是toRef只能读取一个指定的属性，而toRefs可以获取到整个对象。

使用示例

我们随意来编写一个reactive对象 userinfo：

import { reactive, toRef } from 'vue'

const userinfo = reactive({
  id: 1,
  name: '小朱',
  age: 18
})

现在，假设你想要在组件中使用name属性。你可以使用toRef将其提取出来：

const userName = toRef(user, 'name')

然后我们在界面上就可以直接来渲染userName

引用关系

其实，在我们目前的代码里面，userName 它成为了一个指向user.name的引用。这意味着无论我们修改userName的value 还是 userinfo.name 它们都会同时修改。

我们添加一个按钮，通过点击按钮来修改name并且打印数据来观察，它们的引用关系。

• 例如我们只修改userName

const userName = toRef(user, 'name')
const handleClick = ()=>{
    userName.value="小张"
    console.log(userinfo.name) //==>"小张"
 }

• 或者只修改userinfo.name

const userName = toRef(user, 'name')
const handleClick = ()=>{
    userinfo.name = "小张"
    console.log(name.value) //==>"小张"
 }

toRefs的来历

toRefs 将一个响应式对象转换为一个普通对象,但是每一个对象其实都是通过toRef转化而来的，所有通过toRefs解构出来属性和原始reactive对象原始属性也是引用关系，可以按照我们上面的演示方式来进行验证一下。

const {name} = toRefs(userinfo)
const handleClick = ()=>{
   name.value="小张"
   console.log(userinfo.name) //==>"小张"
}