描述:在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属性具体怎么用,传送门