Vue3-toRef 和 toRefs 函数
- 功能:可以简化语法调用。
- toRef
- 函数执行时会生成一个对象 ObjectRefImpl ,是一个引用对象,具有value属性(getter 和 setter 属性)
- 语法格式:
toRef(对象名, '对象中的属性名')
- toRefs 语法格式:
toRefs(对象名)
<template><h2>计数器1:{{counter1}}</h2><button @click="counter1++">计数器1加1</button><hr><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}})return {counter1 : toRef(data, 'counter1'),counter2 : toRef(data.a, 'counter2')}return {...toRefs(data)}}}
</script>