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}
  }
  • 如图:
    Vue3 学习笔记 —— toRefs_第1张图片
  • 场景:如果不使用 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>

  • 如图:
    Vue3 学习笔记 —— toRefs_第2张图片

你可能感兴趣的