我需要在计算(computed)属性中使用的逻辑两次.由于争用条件,我无法使用计算(computed)属性本身.因此,我的 idea 是将该功能放在一个方法中,并重写计算(computed)属性,如下所示:

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;
});

我想知道计算的属性是否仍然像以前一样具有react 性,或者提取逻辑might是否有副作用?

推荐答案

在您的代码中,在计算(computed)属性billableProjects中调用filterProjectOptions函数.仅当其react 依赖项之一发生更改时,计算(computed)属性才会重新计算其值.

在本例中,由于filterProjectOptions是在Computed属性内调用的,因此filterProjectOptions的react 依赖项中的任何更改都将触发billableProjects的重新计算.然而,如果filterProjectOptions的react 依赖性没有改变,则不会重新计算计算的属性billableProjects.

如果要直接在计算(computed)属性中编写整个逻辑,则该逻辑中的react 依赖项的任何更改都将触发计算(computed)属性的重新计算.但是,如果在filterProjectOptions内使用react 依赖项,而不是直接在计算(computed)属性中使用,则除非filterProjectOptions的结果发生更改,否则不会重新计算计算(computed)属性.

总之,如果filterProjectOptions内部的逻辑依赖于可能更改的react 性依赖项,并且您希望在这些依赖项更改时重新计算Computed属性,则在Computed属性中调用filterProjectOptions是正确的方法.

Vue.js相关问答推荐

如何使用Nuxt 3动态处理无限嵌套路由?

V-img不显示文件夹中的图像

使用V-TOOLTIP(实例化)使工具提示在V-文本字段中显示清晰的图标

如何将模板传递给EJS菜单

我在表格中创建了一个包含信息的新行,但在 Cypress e2e 测试中我无法获得最后一行(新行)

如何在 vuejs 中导入和使用本地 .csv 文件

如何 for each 用户分组聊天消息?

使用数组元素的计算(computed)属性

如何在 Vue.js 中使用 MaterializeCss?

查看 cli3 启用 CORS

vuejs中watch方法和计算方法有什么区别

如何根据生产或开发模式读取不同的 .env 文件?

事件 click点击的无效处理程序:未定义

vue-test-utils:无法覆盖属性 $route,这通常是由于插件将该属性添加为只读值

如何在 NPM 上创建和发布 Vuejs 组件

Vue.js:TypeError:无法设置只有 getter 的 # 的属性props

Vuejs css 范围性能

使用 puppeteer 生成 PDF 而不保存

将鼠标悬停在 TailwindCSS 中的 div 上时显示按钮

使用 vue.js 获取调用元素