我建立了一个对象,视图中遍历这个对象,并显示这个值,然后有个按钮,可以改变obj对象的值
<li v-for="(items,index) in obj" :key="index" >{{items}}</li>
<button @click="btn">添加obj.b</button>
<script>
export default:{
data(){
return:{
obj:{
'a':'aaa'
}
}
},
methods:{
btn(){
this.obj.b = 'bbb'
console.log('obj的属性会改变,但是视图不会更新')
}
}
}
//原因在于在Vue实例创建时, obj.b 并未声明,因此就没有被Vue转换为响应式的属性,
自然就不会触发视图的更新,由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,
所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。这时就需要使用Vue的全局api—— set():或者我们在vue实例创建前给obj定义一个obj.b属性,这样就会被vue加入响应中或者可以使用vue.set():或者我们在vue实例
创建前给obj定义一个obj.b属性,这样就会被vue加入响应中
或者可以使用vue.set():或者我们在vue实例创建前给obj定义一个obj.b属性,这样就会被vue加入响应中或者可以使用vue.set()方法,给对象设置属性,会自动加入相应中
//Vue,$set方法(向对象添加一个属性)
在btn(){
this.$set(this.obj,'a','bbb') //set语法 target响应的对象 key:对象需要监控的键的名称 value 属性值,
}
//由于js的限制,vue不能检测以下数组的变化:
1.当你利用索引直接设置一个数组项时,vm.items[index] = newValue
2.当你修改数组的长度时,vm.items.length = newLength
data:{
items:[‘a’,‘b’,‘c’]
}
vm.items[1] = ‘x’ //不是响应的
vm.items.length = 2 //不是响应的
//解决响应
Vue.set(vm.items,index,newValue)
vm.$set(vm.items,index,newValue)
//主要是用来解决vue无法检测到对象中新增的property