在vue中修改数组某个元素，值变了，渲染不了

描述：在vue的data属性中，定义了一个数组，然后这个数组需要在html中渲染，你需要在watch属性中修改了某个值，在html中显示。

问题：为什么渲染不了？

答：跟vue的响应式原理有关（我瞎说的）

解决方案：

方法一：（推荐）

用this.$forceUpdate()强制刷新，官方文档定义：迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件

export default {
    data(){
        return {
            arr:['张三','李四','王五','赵六']
        }
    }
    
    watch: {
        arr:{
            immediate:true
            deep:true
            handler(v) {
                this.arr[0] = '熊二'
                this.$forceUpdate()//如果修改data中数组（根据下标）的某个值，要强制刷新
            }
        }
    }
}

方法二：（推荐）

用$set()方法，一参是数组，二参是下标，三参是值

export default {
    data(){
        return {
            arr:['张三','李四','王五','赵六']
        }
    }
    
    watch: {
        arr:{
            immediate:true
            deep:true
            handler(v) {
                this.$set(this.arr, 0, '熊二')
            }
        }
    }
}

方法三：（不推荐）

直接换掉整个数组

2021/11/11更新

重点

this.$forceUpdate()与this.$set()的区别？

this.$forceUpdate()强制性刷新dom（全局）性能消耗高，触发updated生命周期

this.$set()对数组和对象赋值，并监听，指定性刷新，性能消耗低

踩坑：套入多个循环后，用this.$forceUpdate()刷新不了，用this.$set()就可以刷新，咱啥也不懂，啥也不敢问

PS：vue中的watch属性具体怎么用，传送门

vue的watch:{}属性用法handler(v){},immediate,deep_是泡沫呀的博客-CSDN博客