你真的知道如何使用Vue.set嗎

前言

😊我活的好累，工做8小時而且非工做時間並不想碰代碼的我仍是利用上班的空閒編一篇文章。

推薦有興趣的開發者能夠參加6月份Vue.js的分享會

場景

通常想到這個api的開發者，都是遇到明明更改了數據，然而瀏覽器的dom卻沒有更新新的數據，有時候會出現操做一下其餘數據，以前更新的數據才渲染到dom，有時候無論怎麼操做都不會更新，這種相似的bug一直讓不少開發者苦惱。

Vue.set

首先讓咱們看看尤大的文檔。

每一個組件都是繼承了vue的原型，因此組件實例化後會在this上掛載一個$set方法，和Vue.set是同樣的。

向響應式對象中添加一個屬性，並確保這個新屬性一樣是響應式的，且觸發視圖更新。

文檔寫的很明白，向響應式對象中添加一個響應式屬性，那麼出現沒法更新視圖(dom)的狀況，不就是說明視圖所綁定的屬性值並非響應式麼。

案例

例一:

<!-- demo.vue -->
<template>
  <div class="demo">
    <input v-model="obj.value1" />
    <input v-model="obj.value2" />
  </div>
</template>

<script> export default { data() { return { obj: {} } } } </script>
複製代碼

如上代碼，當一個組件中有多個input標籤，而且v-model綁定多個值時，且這些值都是某一個對象中動態出現的屬性，這種狀況下，若是單純的賦值,

// 錯誤賦值
export default {
  methods: {
    fn() {
      getData().then(res => {
        this.obj[res.key] = res.value;
      })
    }
  }
}
複製代碼

這種狀況下，你會在devtools中看到，數據的確賦值成功了，然而input沒法更新視圖，而且可能你沒法在這個input內輸入任何內容了，這時this.obj裏面的鍵都不是響應式的，那麼this.$set方法該出場了。

// 正確姿式
export default {
  methods: {
    fn() {
      getData().then(res => {
        // this.obj[res.key] = res.value;
        this.$set(this.obj, res.key, res.val);
      })
    }
  }
}
複製代碼

此時你會發現，🤩視圖更新了，一切都美好了，吃的飯也更香了。

例二:

有人說了，只用this.$set不就好了，Vue.set有啥用

<!-- demo.vue -->
<template>
  <div class="demo">
    <input v-model="obj.value1" />
    <input v-model="obj.value2" />
  </div>
</template>

<script> import { mapState } from 'vuex'; export default { computed: { ...mapState(['obj']), } } </script>
複製代碼

此時obj是一個vuex的狀態，這個obj多是其餘組件或者頁面的，此時Vue.set就出場了。

// 某個mutation😊
import Vue from 'vue';
export default {
  updateObj(state, { key, value }) {
    // state.obj[key] = value; 這是錯誤的賦值
    Vue.set(state.obj, key, value);
  }
}
複製代碼

It's over

一切vue技術棧的bug和疑問均可以來問我

歡迎來個人Vue技術羣交流：887516034