当前位置：首页 > article >正文

Vue3-toRef 和 toRefs 函数

article 2024/9/23 20:18:44

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
                }
            })

            // toRef
            return {
                counter1 : toRef(data, 'counter1'),
                counter2 : toRef(data.a, 'counter2')
            }

            // toRefs
            // 使用 toRefs 只能将调用时相同的语法进行简化
            return {
                ...toRefs(data)
            }
        }
    }
</script>