Vue3-toRef 和 toRefs 函数

Vue3-toRef 和 toRefs 函数

• 功能：可以简化语法调用。
• toRef
  • 函数执行时会生成一个对象 ObjectRefImpl ，是一个引用对象，具有value属性（getter 和 setter 属性）
  • 语法格式：toRef(对象名, '对象中的属性名')
• toRefs 语法格式：toRefs(对象名)

// App.vue
<template><h2>计数器1：{{counter1}}</h2><button @click="counter1++">计数器1加1</button><hr>// 如果使用 toRef 那么 a. 就可以不写<h2>计数器2：{{a.counter2}}</h2><button @click="a.counter2++">计数器2加1</button>
</template><script>import { reactive, toRef, toRefs } from 'vue'export default {name : 'App',setup(){let data = reactive({counter1 : 1,a : {counter2 : 100}})// toRefreturn {counter1 : toRef(data, 'counter1'),counter2 : toRef(data.a, 'counter2')}// toRefs// 使用 toRefs 只能将调用时相同的语法进行简化return {...toRefs(data)}}}
</script>