Alpine.data对象内拼接数组返回Proxy对象问题咨询

1. data属性为Proxy的原因 #

Alpine.js v3及更高版本基于ES6 Proxy实现响应式能力，所有在Alpine.data中定义的属性都会被框架自动包装为Proxy实例，以此监听属性的读写、数组变更等操作，自动触发DOM更新，这是框架的正常设计，不属于代码错误。

2. 数组拼接逻辑修正 #

你当前的拼接写法存在逻辑缺陷：如果接口返回的data是作业列表数组，现有写法this.data = [...this.data, data]会把整个返回数组作为单个元素追加到this.data末尾，不符合拼接预期，需要修改为同时展开返回的结果数组：

jobState = {
    low: 5,
    high: 10,
    isLoaded: false
}

document.addEventListener("alpine:init", () => {
    Alpine.data("loadMoreJobs", () => ({
        data: [],
        loadJobs() {
            // Update jobState
            jobState.low = jobState.high
            jobState.high += 5
            const requestParams = {
                dataType: 'json',
                method: 'GET'
            }
            fetch(`http://127.0.0.1:3000/jobs/list/${jobState.low}/${jobState.high}`, requestParams)
                .then((resp) => {
                    return resp.json()
                })
                .then((jobList) => {
                    this.data = [...this.data, ...jobList]
                })
        }
    }))
})

这里将接口返回的形参名改为jobList，避免和你声明的this.data重名引发混淆。

3. 获取原生普通数组的方法 #

如果你确实需要使用未被Proxy包装的原生数组，可以调用Alpine提供的Alpine.raw()方法：

const nativeArray = Alpine.raw(this.data)

返回的nativeArray就是无Proxy包装的普通数组。

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