• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • toRefs()

    将响应式对象转换为普通对象,其中结果对象的每个 property 都是指向原始对象相应 property 的ref

    const state = reactive({
    	foo: 1,
    	bar: 2
    })
    
    const stateAsRefs = toRefs(state)
    
    
    /*
    Type of stateAsRefs:
    
    {
    	foo: Ref<number>,
    	bar: Ref<number>
    }
    */
    
    
    // ref 和 原始property “链接”
    state.foo++
    console.log(stateAsRefs.foo.value) // 2
    
    stateAsRefs.foo.value++
    console.log(state.foo) // 3
    

    当从合成函数返回响应式对象时,toRefs非常有用,这样消费组件就可以在不丢失响应性的情况下对返回的对象进行分解/扩散:

    function useFeatureX() {
        const state = reactive({
            foo: 1,
            bar: 2
        })
    
        // 逻辑运行状态
    
        // 返回时转换为ref
        return toRefs(state)
    }
    
    export default {
        setup() {
            // 可以在不失去响应性的情况下破坏结构
            const { foo, bar } = useFeatureX()
    
            return {
                foo,
                bar
            }
        }
    }
    

    上篇:reactive()

    下篇:isRef()