将计算属性逻辑抽离为方法是否合规？是否影响响应性？

问题背景 #

为了复用计算属性内的逻辑、规避竞态条件，将原计算属性的逻辑抽离为filterProjectOptions方法，改写后的代码如下：

const filterProjectOptions = () => {
    let options = [];
    if (propData.value.contact_company.projects.billable.length) {
        propData.value.contact_company.projects.billable.forEach((element, index) => {
            options[index] = cloneDeep(element);
            options[index].select_value = element.id;
            options[index].select_label = (element.name ? element.name : "Kein Name");
        })
    }
    return options;
}

const billableProjects = computed(() => {
    let options = filterProjectOptions();
    return options;
});

疑问：该计算属性是否仍保持原有响应性？抽离逻辑是否可能产生副作用？

解答 #

1. 响应性完全保留
   这个计算属性依然具备原有响应性。Vue的响应式系统会自动追踪计算属性回调中访问的所有响应式数据，这里filterProjectOptions方法内部读取了propData.value.contact_company.projects.billable这个响应式数据源，只要该数据发生变化，computed回调就会重新执行，调用filterProjectOptions生成新结果，完全符合计算属性的响应式预期。

2. 当前抽离逻辑无副作用
   目前的filterProjectOptions方法只做了读取响应式数据、深拷贝对象、组装新数组返回这几件事，没有修改任何外部状态（比如原响应式数据、全局变量、DOM元素等），因此不存在副作用。唯一需要注意的是：如果billable数组规模较大或频繁更新，cloneDeep的深拷贝操作可能带来一定性能开销，但这属于性能优化范畴，并非副作用。

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