【思考】Vue2响应丢失、$set
- vue2响应丢失情况复现
- 原因
- 解决
- 总结
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的响应原理还是有缺陷的，还是有可能出现响应丢失的情况。但我暂时没遇到过，等下次遇到的时候再来研究记录。
