vue - 数据改变页面不刷新
vue - 数据改变页面不刷新
当vue中data里声明或者已经赋值过的对象、数组时,向对象中添加新的属性,如果更新此属性的值,页面不会更新视图。
举个栗子:当我点击按钮想要改变message中的值时
<template>
<div>
<span>{{ message }}</span>
<button @click="addMessage">addMessage</button>
</div>
</template>
<script>
export default {
data() {
return {
message: {
a: 0,
},
};
},
methods: {
addMessage() {
this.message.b = 1;
},
},
};
</script>
此时当我点击按钮,页面并不会发生改变。
官方定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
Vue官方文档给我们提供了两种方法:Vue.set()
和this.$set()
两种方法作用一样,参数也是一致的。
区别:Vue.set
可以设置实例创建之后添加的属性,而this.$set
只能设置实例创建后存在的属性
<template>
<div>
<span>{{ message }}</span>
<button @click="addMessage">addMessage</button>
</div>
</template>
<script>
import Vue from 'vue';
export default {
data() {
return {
message: {
a: 0,
},
};
},
methods: {
addMessage() {
// this.message.b = 1;
// this.$set(this.message, 'b', 1);
Vue.set(this.message, 'b', 1);
},
},
};
</script>
Lee2