Vue不能检测普通方法对象属性的添加和删除,比如
user: {}
-------------------
this.user.age = 23;
Vue.set( target, propertyName/index, value )
对此vue提供了set方法,向响应式对象中添加属性,并确保这个新属性同样是响应式的,且会触发视图更新
<body>
<div id="app">
<h3>
{{user.name}},{{user.age}}
<button @click='handlerAdd'>添加属性</button>
</h3>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
user: {}
},
methods: {
handlerAdd() {
this.$set(this.user, 'age', 20);
}
},
created() {
setTimeout(() => {
this.user = {
name: 'Max'
}
}, 2000);
}
})
</script>
</body>
添加多个属性可以set多次,但是有些繁琐,可以使用es6提供的 Object.assign 方法
handlerAdd() {
//添加多个响应式属性
this.user = Object.assign({},this.user,{
age: 23,
lv: 6
})
}
Vue.delete(target,propertyName/index)
删除对象的属性,如果对象是响应式的,确保删除能触发更新视图,这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是应该很少会使用到它