快捷導(dǎo)航

Vue中直接操作數(shù)組索引不奏效的問題解讀

更新時(shí)間：2022年09月10日 10:33:51 作者：SHIKARU

這篇文章主要介紹了Vue中直接操作數(shù)組索引不奏效的問題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue操作數(shù)組索引不奏效

1.案例

我們首先創(chuàng)造一個(gè)數(shù)組hobby并展示

data:{
hobby:["抽煙" , "喝酒" , "燙頭"]
}

<ul>
	<li v-for="(item , index) in hobby">{{item}}</li>
</ul>

此時(shí)，我們?cè)诳刂婆_(tái)操作修改該數(shù)組

vm.hobby[0] = "運(yùn)動(dòng)"

會(huì)發(fā)現(xiàn)此時(shí)數(shù)組確實(shí)已經(jīng)修改，但頁面內(nèi)容并沒有改變

2.解釋

我們知道，Vue會(huì)對(duì)每一個(gè)data中的對(duì)象創(chuàng)建getter和setter方法，來實(shí)現(xiàn)響應(yīng)式

我們查看此數(shù)組，發(fā)現(xiàn)并沒有對(duì)每個(gè)數(shù)組元素的getter和setter方法的設(shè)置

此處為了方便理解，我們將該數(shù)組改為對(duì)象，對(duì)比一下

data: {
          hobby: {
            i1:"抽煙",
            i2:"喝酒",
            i3:"燙頭"
            }
    }

很明顯多了對(duì)于每一項(xiàng)的setter和getter方法的設(shè)置，這是響應(yīng)式的關(guān)鍵

3.如何操作數(shù)組

一.push、pop、shift、unshift、reverse、sort、splice等可以直接修改數(shù)組本身的方法，可以做到響應(yīng)式

vm.hobby.push('運(yùn)動(dòng)') //頁面實(shí)時(shí)更新了

二.使用Vue.set()方法

以上兩種方法都可以做到響應(yīng)式

4.深層原因

這里沿用上例。

此處調(diào)用的操作數(shù)組的方法push，其實(shí)已經(jīng)不是數(shù)組原型對(duì)象中的push了

Vue中存在的push，第一步先調(diào)用了Array原型對(duì)象的push，第二步重新解析模板，生成虛擬DOM

Vue 將被偵聽的數(shù)組的變更方法進(jìn)行了包裹，所以它們也將會(huì)觸發(fā)視圖更新。這些被包裹過的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

以上為官方文檔。

多看看文檔總是會(huì)有收獲的

更新數(shù)組或?qū)ο蟛簧?/h2>

新增對(duì)象屬性不生效

<body>
    <div id="root">
        <button @click="updateInfo">更新學(xué)生信息</button>
        <div>姓名：{{student.name}}</div>
        <div>年齡：{{student.age}}</div>
        <div>性別：{{student.gender}}</div>
    </div>
    <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:"#root",
        data:{
            student:{
                name:"張三",
                age:18
            }
        },
        methods:{
            updateInfo(){
                this.student.gender = "男";
            }
        }
    })
    </script>
</body>

【問題描述】如上圖所示，this.student.gender = “男”，新增對(duì)象屬性不生效。

【解決方法】使用Vue.set(target,key,value)或者vm.$set(target,key,value)，如下圖所示。

以下四個(gè)寫法均可。

Vue.set(vm.student,“gender”,“男”)
Vue.set(vm._data.student,“gender”,“男”)
vm.$set(vm.student,“gender”,“男”)
vm.$set(vm._data.student,“gender”,“男”)

所以，updateInfo函數(shù)可以改成這樣：

<body>
    <div id="root">
        <button @click="updateInfo">更新學(xué)生信息</button>
        <div>姓名：{{student.name}}</div>
        <div>年齡：{{student.age}}</div>
        <div v-if="student.gender">性別：{{student.gender}}</div>
    </div>
    <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:"#root",
        data:{
            student:{
                name:"張三",
                age:18,
            }
        },
        methods:{
            updateInfo(){
                // Vue.set(this.student,"gender","男");
                this.$set(this.student,"gender","男");
            }
        }
    })
    </script>
</body>

更新數(shù)組元素不生效

<body>
    <div id="root">
        <button @click="updateInfo">更新馬某梅的信息</button>
        <ul>
            <li v-for="(p,index) of persons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.gender}}
            </li>
        </ul>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            persons:[
                {id:"001",name:"周冬雨",age:18,gender:"女"},
                {id:"002",name:"馬冬梅",age:19,gender:"女"},
                {id:"003",name:"張桂梅",age:59,gender:"女"},
                {id:"004",name:"周杰倫",age:30,gender:"男"}
            ]
        },
        methods:{
                updateInfo(){
                    //更新 奏效
                    // this.persons[1].name = "馬鐵梅";
                    // this.persons[1].age = 25;
                    // this.persons[1].gender = "男";
                    //更新 不奏效
                    this.persons[1] = {
                   		id:"002",
                        name:"馬鐵梅",
                        age:25,
                        gender:"男"
                    }
                }
            }
    })
    </script>
</body>

【問題描述】this.persons[1]={name:xxx,age:xxx,gender}，更新數(shù)組元素不生效。

【解決方法】有兩種解決方法：

使用方法splice更新數(shù)組，如下所示。

this.persons.splice(1,1,{
    id:"002",
    name:"馬鐵梅",
    age:25,
    gender:"男"
})

使用Vue.set(target,key,value)或者vm.$set(target,key,value)。

this.$set(this.persons,1,{
    id:"002",
    name:"馬鐵梅",
    age:25,
    gender:"男"                        
})
//或者
Vue.set(this.persons,1,{
    id:"002",
    name:"馬鐵梅",
    age:25,
    gender:"男"                                 
})

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: