vue computed 計(jì)算屬性當(dāng)依賴(lài)屬性更新時(shí)計(jì)算屬性沒(méi)有執(zhí)行？

computed: {
    comp: function () {
        return () => import(`./component/item${this.formItem.item_type}.form`);
    }
},

當(dāng)我切換this.formItem.item_type的值，comp沒(méi)有被觸發(fā)

computed: {
    comp: function () {
        console.log(this.formItem.item_type)
        return () => import(`./component/item${this.formItem.item_type}.form`);
    }
},

當(dāng)我加上console.log(this.formItem.item_type)時(shí)，正常觸發(fā)，注釋掉又不能正常觸發(fā)，這是為什么呢？

另外：我使用watch去監(jiān)聽(tīng) 正常了

watch:{
    'formItem.item_type': function (val, oldVal) {
        this.comp = () => import(`./component/item${this.formItem.item_type}.form`);
    }
},

補(bǔ)充this.formItem對(duì)象

回答

編輯回答

寫(xiě)榮

先看一下 this.formItem.item_type 是不是響應(yīng)式吧。用開(kāi)發(fā)者工具展開(kāi)到這一步，如果是 (...) 或者下面有淺色的 get/set 就是，不然的話，這個(gè)變量并未被觀察，所以沒(méi)有響應(yīng)式。

2017年6月13日 04:10

編輯回答

我以為

因?yàn)橹挥心阍谟?jì)算屬性?xún)?nèi)訪問(wèn)了相應(yīng)的變量, 計(jì)算屬性才能形成對(duì)其的依賴(lài).

a = () => import(`./component/item${this.formItem.item_type}.form`);

當(dāng) a 函數(shù)沒(méi)有調(diào)用時(shí), this.formItem.item_type 是不會(huì)被求值的, 也就一直沒(méi)有被訪問(wèn)過(guò), 所以無(wú)法被計(jì)算屬性收集為依賴(lài), 你 console.log(this.formItem.item_type) 觸發(fā)了 this.formItem.item_type 的訪問(wèn), 完成了依賴(lài)收集, 自然沒(méi)有問(wèn)題.

還有, 像這種永遠(yuǎn)不會(huì)被執(zhí)行的代碼, 也無(wú)法被收集依賴(lài).

if (false) {
 a = this.formItem.item_type
}

解決方案:

comp: function () {
    // 顯示的取值, 使 comp 收集依賴(lài)
    this.formItem.item_type;
  
    return () => import(`./component/item${this.formItem.item_type}.form`);
}

2018年3月4日 23:12