Vue3 学习笔记 —— toRefs

toRefs

• 作用：将一个响应式对象，转换为普通对象，并且将其中的属性转换为 Ref 对象

  setup() {
    let state = reactive({
      name: 'zly',
      age: 47
    })

    let state2 = toRefs(state)

    console.log(state)	// 响应式对象
    console.log(state2)	// 普通对象，其中的属性被转换为 Ref 属性
    
    return {...state2}
  }

• 如图：
  
• 场景：如果不使用 toRefs 那么

<template>
  name: {{name}}		<!-- 页面不会更新 -->
  age: {{age}}
</template>

<script lang="ts">

import { defineComponent, reactive, toRefs} from 'vue';

export default defineComponent({
  name: 'Child',

  setup() {
    let state = reactive({
      name: 'zly',
      age: 47
    })

    setInterval(()=>{
      state.name += '--'
    }, 1000)

    return {...state} // 扩展出去的属性只是普通属性，不可以数据响应式
  }

});
</script>

• 如果使用 toRefs 将内部属性都用 Ref 包装

<template>
  name: {{name}}		<!-- 页面更新 -->
  age: {{age}}
</template>

<script lang="ts">

import { defineComponent, reactive, toRefs} from 'vue';

export default defineComponent({
  name: 'Child',

  setup() {
    let state = reactive({
      name: 'zly',
      age: 47
    })

    let state2 = toRefs(state)

    setInterval(()=>{
      state2.name.value += '--'
    }, 1000)

    return {...state2} // 扩展出去的属性是响应式的 Ref 对象，可以响应式
  }

});
</script>

• 如图：