Vue.js中如何为customRef创建可自定义属性的类？

问题背景 #

Vue的customRef API支持通过传入包含get/set方法的对象创建自定义响应式ref，但如果使用类实例作为参数，customRef会提取这两个方法并脱离原实例作用域，导致方法内的this无法访问类的属性。

比如尝试实现一个根据类属性动态返回值的自定义ref：

class AppCustomRef {
    public property;
    private _value;

    constructor(value) {
        this._value = value;
    }

    get() {
        if (this.property === true) {
            return this._value;
        } else {
            return -this._value;
        }
    }

    set(newValue) {
        this._value = newValue;
    }
}

const appPropertyRef = new AppCustomRef(100);
const myCustomRef = customRef(appPropertyRef);
appPropertyRef.property = false;

此时调用myCustomRef.value时，get方法内的this.property会是undefined，因为get函数的作用域已脱离appPropertyRef实例。

可行解决方案 #

1. 绑定方法的this到类实例 #

在类的构造函数中，将get和set方法的this绑定到当前实例，确保方法执行时能正确访问类属性：

class AppCustomRef {
    public property;
    private _value;

    constructor(value) {
        this._value = value;
        // 绑定this到实例
        this.get = this.get.bind(this);
        this.set = this.set.bind(this);
    }

    get() {
        return this.property ? this._value : -this._value;
    }

    set(newValue) {
        this._value = newValue;
    }
}

// 使用方式不变
const appPropertyRef = new AppCustomRef(100);
const myCustomRef = customRef(appPropertyRef);
appPropertyRef.property = false;

2. 手动传入绑定上下文的get/set #

创建customRef时，不直接传类实例，而是传入一个包含箭头函数的对象，通过箭头函数捕获类实例的上下文：

class AppCustomRef {
    public property;
    private _value;

    constructor(value) {
        this._value = value;
    }

    get() {
        return this.property ? this._value : -this._value;
    }

    set(newValue) {
        this._value = newValue;
    }
}

const appPropertyRef = new AppCustomRef(100);
const myCustomRef = customRef({
    get: () => appPropertyRef.get(),
    set: (val) => appPropertyRef.set(val)
});
appPropertyRef.property = false;

3. 用工厂函数替代类（闭包方案） #

利用闭包保留状态和上下文，避免this指向问题：

function createAppCustomRef(initialValue) {
    let property = false;
    let _value = initialValue;

    return {
        // 暴露可修改的property
        get property() { return property; },
        set property(val) { property = val; },
        // customRef需要的get/set方法
        get() {
            return property ? _value : -_value;
        },
        set(newValue) {
            _value = newValue;
        }
    };
}

const appPropertyRef = createAppCustomRef(100);
const myCustomRef = customRef(appPropertyRef);
appPropertyRef.property = false;

这些方案都能解决this作用域丢失的问题，让自定义ref的get/set方法正确访问类或闭包中的属性。

内容的提问来源于stack exchange，提问作者adevart