Vue不能检测对象属性的添加或者删除
对象的新增属性vue无法响应式的更新,原有属性可正常更新
数组的能修改源数组的方法能实现数组的响应式更新,但是如果直接修改数组的值无法响应式更新
this.$set(对象,属性名,修改后的值)
<template>
<div>
<h3>{{ obj }}</h3>
<button @click="change">点击修改obj</button>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
a: 1
}
}
},
methods: {
change() {
this.obj.b = Date.now() //这种不能同步更新 , 不是响应式的
// this.$set(this.obj, 'b', Date.now()) 这个是响应式的
console.log(this.obj)
}
}
}
</script>
<style></style>
静默刷新
适用场景:数据修改了,页面没更新 组件的还原
需要刷新的数据 v-if="bol" bol默认为true
this.bol=false
this.$nextTick(()=>{
this.bol=true
})
<template>
<div v-if="bol">
<h3>{{ obj }}</h3>
<button @click="change">点击修改obj</button>
</div>
</template>
<script>
export default {
data() {
return {
bol: true,
obj: {
a: 1
}
}
},
methods: {
change() {
this.obj.b = Date.now()
this.bol = false
this.$nextTick(() => {
this.bol = true
})
console.log(this.obj)
}
}
}
</script>
<style></style>