vue2响应丢失情况复现

场景：直接通过数组下标去修改数组造成响应丢失

<template>
  <div>
    <p v-for="(item, index) in list" :key="index">{{item}}</p>
    <button @click="change">change</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      list: [
        '张三',
        '李四',
        '王五',
      ]
    }
  },
  methods: {
    change() {
      this.list[0] = 'hsy';
      console.log('this.list[0]:' + this.list[0]);
    }
  }
}
</script>

原因

具体原理涉及到数据的存储方式以及vue2的响应原理，具体可以参考这篇文章——【博主：AC_uv】手撕vue2响应式

简单来说，就是Vue2的响应原理它不支持深层次的响应

解决

vue2提供了一个api $set 可以解决这个问题，this.$set(target,key,value)

change() {
  // this.list[0] = 'hsy';
  this.$set(this.list, 0, 'hsy');
  console.log('this.list[0]:' + this.list[0]);
}

总结

Vue3的响应原理和Vue2不同，它就规避了这种造成响应丢失的情况，所以在Vue3中是没有$set这个API的。

但是Vue3的响应原理还是有缺陷的，还是有可能出现响应丢失的情况。但我暂时没遇到过，等下次遇到的时候再来研究记录。