在vue的實(shí)例方法中， $set可以更新對(duì)象數(shù)據(jù)或是數(shù)組，有時(shí)在實(shí)際的開發(fā)過程中，對(duì)象的數(shù)據(jù)可能會(huì)沒有及時(shí)地更新，導(dǎo)致頁面渲染的值還是舊值，這個(gè)時(shí)候就可以使用$set去重新更新下數(shù)據(jù)。

1、使用$set()去更新對(duì)象

使用方法：$set(data選項(xiàng)中的對(duì)象名, 屬性名, 屬性值)

<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of user" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      user: {
        name: "xiaochen",
        addr: "china",
        userAge: 18,
      },
    };
  },
  created() {
    console.log('created生命周期：',this.user);
  },
  updated() {
    console.log('updated生命周期：',this.user);
  },
  methods: {
    add() {
      this.$set(this.user, "score", 90);
    },
  },
};
</script>

<style scoped>
</style>

生命周期打印對(duì)象數(shù)據(jù).png

2、使用$set()去更新數(shù)組

數(shù)組的處理方法有兩種，一種是直接通過修改數(shù)組的引用從而達(dá)到改變數(shù)組內(nèi)容在頁面重新渲染的效果，這種方法實(shí)際開發(fā)中不推薦，比較笨重。

2.1、通過修改數(shù)組的引用

<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList:['蘋果','香蕉','草莓']
    };
  },
  created() {
    console.log('created生命周期：',this.typeList);
  },
  updated() {
    console.log('updated生命周期：',this.typeList);
  },
  methods: {
    add() {
      this.typeList = ['蘋果','冬瓜','草莓']
    },
  },
};
</script>

<style scoped>
</style>

通過改變數(shù)組的引用.png

2.2、通過數(shù)組的操作方法去修改（push()，pop()，splice()等）

修改數(shù)組元素個(gè)人喜歡spice()方法，splice(插入的位置索引號(hào)，刪除元素的個(gè)數(shù)，插入的元素)

<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList:['蘋果','香蕉','草莓']
    };
  },
  created() {
    console.log('created生命周期：',this.typeList);
  },
  updated() {
    console.log('updated生命周期：',this.typeList);
  },
  methods: {
    add() {
    //   this.typeList.push('冬瓜')
    this.typeList.splice(1,1,'冬瓜')
    },
  },
};
</script>

<style scoped>
</style>

數(shù)組方法實(shí)現(xiàn).png

2.3、直接修改數(shù)組索引位置導(dǎo)致的一系列問題

在js中，還有一種修改數(shù)組的方法，那就是通過直接修改數(shù)組索引下標(biāo)，從而修改數(shù)組中的元素?cái)?shù)據(jù)內(nèi)容，但是這樣做，就會(huì)出現(xiàn)，數(shù)組更新了，但是頁面沒有重新渲染，也就是說，updated()生命周期函數(shù)沒有執(zhí)行！

<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList: ["蘋果", "香蕉", "草莓"],
    };
  },
  created() {
    console.log("created生命周期：", this.typeList);
  },
  updated() {
    console.log("updated生命周期：", this.typeList);
  },
  methods: {
    add() {
      this.typeList[1] = "冬瓜";
      console.log("打印修改后數(shù)組中的數(shù)據(jù)：", this.typeList);
    },
  },
};
</script>

<style scoped>
</style>

頁面的內(nèi)容.png

生命周期以及方法內(nèi)的打印.png

可以看到，使用這種方法就會(huì)導(dǎo)致頁面數(shù)據(jù)沒有進(jìn)行重新渲染！但是數(shù)組確實(shí)是發(fā)生了變化的。因此，實(shí)際開發(fā)中需要避開這種操作，以免產(chǎn)生數(shù)據(jù)渲染失敗的問題。

2.4、使用$set()同樣可以修改數(shù)組

$set()的使用方法是this.$set(數(shù)組名，插入的索引下標(biāo)值，插入的數(shù)據(jù)元素)

<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList:['蘋果','香蕉','草莓']
    };
  },
  created() {
    console.log('created生命周期：',this.typeList);
  },
  updated() {
    console.log('updated生命周期：',this.typeList);
  },
  methods: {
    add() {
      this.$set(this.typeList, 1, '榴蓮');
    },
  },
};
</script>

<style scoped>
</style>

修改某個(gè)數(shù)組元素.png

這種修改數(shù)組的方式，同樣是能夠達(dá)到數(shù)組的內(nèi)容發(fā)送改變并且頁面也是能夠重新渲染的。