在vue中請(qǐng)求接口中，一個(gè)請(qǐng)求方法可能對(duì)應(yīng)后臺(tái)兩個(gè)請(qǐng)求接口，所以請(qǐng)求參數(shù)就會(huì)有所不同。需要我們先設(shè)置共同的參數(shù)，然后根據(jù)條件動(dòng)態(tài)添加參數(shù)屬性

一、場(chǎng)景例子

<body>
    <div id="app">
        <p v-for="(value,key) in item" :key="key">
            {{value}}
        </p>
        <button @click="addProperty">動(dòng)態(tài)添加新屬性</button>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            item:{
                oldProperty:"舊屬性"
            }
        },
        methods: {
            addProperty(){
                this.item.newProperty = "新屬性";
                console.log(this.item);
            }
        },
    })
</script>

效果：點(diǎn)擊按鈕后，輸出的結(jié)果中有新添加的新屬性，但是頁(yè)面沒有顯示新屬性。

二、原理分析

vue2使用Object.defineProperty實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式；

const obj = {}
Object.defineProperty(obj, 'foo', {
        get() {
            console.log(`get foo:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                console.log(`set foo:${newVal}`);
                val = newVal
            }
        }
    })
}

當(dāng)訪問foo屬性，或者設(shè)置foo值的時(shí)候都能觸發(fā)setter與getter；
但是為obj添加新屬性的時(shí)候，卻無法觸發(fā)事件屬性的攔截

bj.bar = '新屬性'

原因是一開始o(jì)bj的foo屬性被設(shè)成了響應(yīng)式數(shù)據(jù)，而bar是后面新增的屬性，并沒有通過Object.defineProperty設(shè)置成響應(yīng)式數(shù)據(jù)

三、解決方案

有三種解決方案：

Vue.set()
Object.assign()
$forcecUpdated()

常用的就是Vue.set()，語法為：Vue.set( target, propertyName/index, value )

<script>
    new Vue({
        el:'#app',
        data:{
            item:{
                oldProperty:"舊屬性"
            }
        },
        methods: {
            addProperty(){
                Vue.set(this.item,"newProperty","新屬性")
                console.log(this.item);
            }
        },
    })
</script>

到此這篇關(guān)于Vue動(dòng)態(tài)添加屬性到data的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue動(dòng)態(tài)添加屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: