vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为 JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化 。但是,对于数组元素的赋值,却没有办法直接监听。 因此,如果我们直接对数组元素赋值 <ul> <li v- for ="(item,index) in arrInfo">{{item.name}}--{{item.age}}</li> </ul> data(){ return { arrInfo:[ { 'name':'zuobaiquan','age':22 }, { 'name':'zhangsan','age':20 } ] } }, // created(){ // this.arrInfo[0]={'name':'zuobaiquan01','age':22} // }, mounted(){ this .arrInfo[0]={'name':'zuobaiquan02','age':22 } } 在mounted阶段,直接对数组元素 arrInfo 赋值会导致Vue无法更新View 说明:在 created 视图未渲染时 直接对数组元素 arrInfo 赋值 data里面的初值会改变的。 此时在mounted阶段,简单的做法是 不要对数组元素赋值,而是更新 mounted(){ this .arrInfo