自定义响应式类型 customRef

在大多数情况下，自定义响应式类型都可以使用methods来实现。

由于没有想到好的应用场景，这里用一个小的案例演示如何使用 customRef 来创建类似 ref功能的函数，代码如下：

template：

<template>
    <view style="left:0 ;top:0;width:100%;height:50px;">
        <uni-title type="h3" :title="'苹果单价:' + unitPrice + '元/公斤'" align="center">
        </uni-title>
    </view>
    <view style="left:0; top: 60px; height:50px;width:100%;">
        <uni-easyinput v-model="weight" type="number" placeholder="重量(KG)" @input="check" @blur="check">
        </uni-easyinput>
    </view>
    <view style="width:100%; left:0; top:150px;height: 50px;">
        <uni-title type="h1" :title="pay" align="center">
        </uni-title>
    </view>
</template>

 

 

script：

<script setup>
    import {
        ref,
        customRef
    } from 'vue'

    var unitPrice = ref(10)
    var weight = ref(0)
    var pay = paymentAmount()


    function check(e){
        pay.value = e  // 设置pay值，就会触发 paymentAmount函数内的 set过程。然后set过程中把计算结果又通过get过程返回出去。即更新了pay值
    }


    function paymentAmount() {
        var result = ref(''); // 必需是响应式的
        return customRef((track, trigger) => {
            return {
                get() {
                    track() // 告诉vue这个数据是需要跟踪变化的
                    return result.value
                },
                set(value) {
                    result.value = '您需要支付: $' + unitPrice.value * value + ' 元！'
                    trigger() // 告诉vue解发界面更新
                }
            }
        })
    }
</script>

 

在演示时，我们只要输入重量，就会显示您要支付的金额，如下图：

 

 

分析：

变量 pay 赋值与取值。比如本例中，pay.value = 34 时，其取值为 您需要支付$340元。这与我们正常的取值与赋值相同是有区别的。当然你也可以修改代码使其取值赋值保持一致性。

customRef 函数注意细节：

1、参数(track, trigger) ，分别用于跟踪数量，和触发更新。

2、customRef 参数函数中，返回 get与 set属性。

3、paymentAmount() 函数体内，result 必需是响应式变量