this.$set和Vue.set

vue的官方文档对于数组的更新机制，做项目时发现图片是这样存储时更换图片不会实时更新 自己的项目采用的es6 的export default
有两种方式:
1.var vm=new Vue，
2.import Vue from 'vue'
或者可以直接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:blush:
import Vue from 'vue';
export default {
  updateObj(state, { key, value }) {
    // state.obj[key] = value;  这是错误的赋值
    Vue.set(state.obj, key, value);
  }
}