• vue3中的ref()


    ref()

    接受一个值,返回一个响应式的,可以修改的ref对象,这个对象只有一个.vaule属性。

    ref对象可以通过.value属性进行修改,修改后的值也是响应式的,并且修改后会触发相关的副作用。

    如果将一个对象赋值给ref,则这个对象会通过reactive()转为具有深层次的响应式对象。

    对于属性值是ref对象的对象,解构后也具有响应式。

    1. ref在模板中自动解包

    当ref作为顶层属性在模板中使用时,自动解包,不用.value即可获取值。

    const count = ref(1);
    count.value = 2;
    
    • 1
    • 2

    直接使用

    
    <div>{{count}}div>
    
    <div>{{count + 1}}div>
    
    • 1
    • 2
    • 3
    • 4

    若不是顶层属性, 假如值需要逻辑操作,则会出现问题。

    const obj = {
        age: ref(1)
    }
    
    • 1
    • 2
    • 3
    
    <div>{{obj.age}}div>
    
    <div>{{obj.age + 1}}div>
    
    • 1
    • 2
    • 3
    • 4

    解构后也具有响应式

    const {age} = obj;
    
    • 1

    2. ref 在响应式对象中的解包

    一个ref对象嵌套在一个响应式对象中,属性访问时会自动解包

    const a = ref(1)
    const state = reactive({
        age: a
    })
    console.log(state.age); // 1 直接解包,不用state.age.value
    
    • 1
    • 2
    • 3
    • 4
    • 5

    如果将一个新的 ref 赋值给另一个对象具有 ref属性的 ,那么它会替换掉旧的 ref。

    const b = ref(3);
    // 假如将b直接赋值给state.age,因为b是一个ref对象,则会替代之前的ref对象,则现在state.age不管如何变化都变量a没有了关系
    state.age = b;
    console.log(stata.age); // 3
    console.log(a); // 1
    // 假如将b.value赋值给state.age,其实b.value就相等于一个值,并不是ref对象,则不会替代之前的ref对象,则state.age变化,之前的变量a也会随之变化
    state.age = b.value;
    console.log(state.age); // 3
    console.log(a); // 3
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    只有当嵌套在一个深层响应式对象内时,才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。

    3. 数组和集合类型的 ref 解包

    跟响应式对象不同,当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时,不会进行解包。

    const books = reactive([ref('Vue 3 Guide')])
    // 这里需要 .value
    console.log(books[0].value)
    
    const map = reactive(new Map([['count', ref(0)]]))
    // 这里需要 .value
    console.log(map.get('count').value)
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    总结

    • 返回一个具有响应式的ref对象,并只有一个属性.value可通过.value 获取或修改值。
    • 在模板中自动解包,对于对象在模板中使用若需要逻辑操作需.value
    • 解构出来的也具有响应式
    • 对于响应式对象可以解包
    • 当一个ref对象赋值给另一个ref对象,则会替换旧的ref对象
    • 对于响应式数组则不会解包
  • 相关阅读:
    Promise 面试常考手写方法汇总
    HarmonyOs开发:组件如何实现属性的动态设置
    JSP response对象简介说明
    设计模式:策略模式
    video 按钮全屏
    Dubbo架构设计及入门案例
    2020 CCPC Changchun F. Strange Memory【dsu on tree】
    maven Could not resolve dependencies for project xxx:jar 错误原因及解决方案
    15 -- 最接近原点的 K 个点
    实战PyQt5: 144-QChart图表之水平柱状图
  • 原文地址:https://blog.csdn.net/zsm4623/article/details/127725615