Vue3 学习笔记 —— toRef 跟 ref 的区别

toRef

• 返回一个对象属性的Ref对象，该Ref对象的value 跟原对象属性的值相耦合

ref

• 将一个数据包装成Ref对象，该Ref对象的value与原数据没有关联

示例：

<template>
  <button @click="change">改变</button>
</template>

<script lang="ts">

import {
      defineComponent, ref, reactive, toRef} from 'vue';

export default defineComponent({
     
  name: 'Child',

  setup() {
     
    let state = reactive({
     
      age: 12,
      money: 5000
    })

    let age = toRef(state, 'age')		// 使用 toRef
    let money = ref(state.money)		// 使用 ref

    let change = ()=>{
     
      age.value++
      console.log('toRef: ', age.value, state.age)		// 同步发生变化

      money.value++
      console.log('ref: ', money.value, state.money)	// 失去关联，不会同步变化
    }
    return {
     
      change
    }
  }

});
</script>