toRef、toRefs、toRaw的使用

本文主要讲述toRef、toRefs和toRaw的功能和使用方法。

toRef

功能是将对象的某一个属性变成ref，如果原始对象是响应式的是会更新视图并且改变数据的，如果原始对象是非响应式的就不会更新视图数据是会变的。

<template>
   <div>
      <button @click="change">按钮</button>
      {
    
    {
    
    state}}
   </div>
</template>
<script setup lang="ts">
import {
    
     reactive, toRef } from 'vue'
const obj = {
    
    
   foo: 1,
   bar: 1
}
const state = toRef(obj, 'bar')
// bar 转化为响应式对象
const change = () => {
    
    
   state.value++
   console.log(obj, state);
}
</script>

结果：视图上的数据不变，控制台console的结果是obj={
“foo”: 1,
“bar”: 2
}
state=2

toRefs

将对象中属性逐个解构出来，变成响应式。如果原始对象是响应式的是会更新视图并且改变数据的，如果原始对象是非响应式的就不会更新视图数据是会变的。

import {
    
     reactive, toRefs } from 'vue'
const obj = reactive({
    
    
   foo: 1,
   bar: 1
})
 
let {
    
     foo, bar } = toRefs(obj)
 
foo.value++
console.log(foo, bar);

结果：2,1
如果obj没有使用reactive包裹，则视图不会更新结果。

toRaw

import {
    
     reactive, toRaw } from 'vue'
const obj = reactive({
    
    
   foo: 1,
   bar: 1
})
const state = toRaw(obj)
// 响应式对象转化为普通对象
const change = () => {
    
    
  //state=2;赋值或者操作会报错
   console.log(obj, state);
}

结果：{foo: 1, bar: 1}