vue3使用6--toRef的使用（定时器）

//toRefs可以把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref

1、正常使用ref和定时器

<template>
  <h2>toRefs的使用</h2>
  <h3>name:{{state.name}}</h3>
  <h3>age:{{state.age}}</h3>
</template>
<script lang="ts">
import { defineComponent, reactive} from 'vue'
export default defineComponent({
  name: 'App',
  setup(){
    const state = reactive({
      name: '大飞',
      age: 48
    })
    setInterval(()=>{
      state.name += '=='
    },2000)
    return{
      state
    }
  }
})
</script>
<style>
</style>

结果

 2、使用了toRef2

（1）简单使用

<template>
  <h2>toRefs的使用</h2>
  <!-- <h3>name:{{state.name}}</h3>
  <h3>age:{{state.age}}</h3> -->

  <h3>name:{{name}}</h3>
  <h3>age:{{age}}</h3>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs} from 'vue'
export default defineComponent({
  name: 'App',
  setup(){
    const state = reactive({
      name: '大飞',
      age: 48
    })
    //toRefs可以把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref
    const state2 = toRefs(state)
    setInterval(()=>{
      // state.name += '=='
      state2.name.value += '=='
    },2000)
    return{
      // state
      ...state2
    }
  }
})
</script>
<style>
</style>

（2）可进一步简化为

<template>
  <h2>toRefs的使用</h2>
  <!-- <h3>name:{{state.name}}</h3>
  <h3>age:{{state.age}}</h3> -->

  <h3>name:{{name}}</h3>
  <h3>age:{{age}}</h3>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs} from 'vue'
export default defineComponent({
  name: 'App',
  setup(){
    const state = reactive({
      name: '大飞',
      age: 48
    })
    //toRefs可以把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref
    // const state2 = toRefs(state)
    const {name,age} = toRefs(state)
    setInterval(()=>{
      // state.name += '=='
      // state2.name.value += '=='
      name.value += '=='
    },2000)
    return{
      // state
      // ...state2
      name,
      age
    }
  }
})
</script>
<style>
</style>