你真的知道如何使用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