p33更新时的一个问题
<body>
<!--准备好一个容器-->
<div class="root">
<ul>
<button @click="updateMei">更新马冬梅的信息</button>
<li v-for="p in persons" :key="p.id">
{{p.name}}-{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '.root',
data: {
persons: [
{ id: '001', name: '马冬梅', age: 19, sex: '女' },
{ id: '002', name: '周冬雨', age: 20, sex: '女' },
{ id: '003', name: '周杰伦', age: 21, sex: '男' },
{ id: '003', name: '温兆伦', age: 22, sex: '男' }
]
},
methods: {
updateMei(){
//下面代码奏效
// this.persons[0].name='马老师'
// this.persons[0].age=40
// this.persons[0].sex='男'
//不奏效
//this.persons[0]={id:001,name:'马老师',age:40,sex:男}
}
},
})
</script>
</body>
为什么this.persons[0]={id:001,name:‘马老师’,age:40,sex:男}这行代码没法更新信息呢?
P34Vue监测数据的原理_对象
https://www.bilibili.com/video/BV1Zy4y1K7SH?t=1033.1&p=34
这边的代码说实话我有点没理解原因是自己没有js的基础(垃圾学校)
<script type="text/javascript">
let data={
name:'尚硅谷',
address:'北京'
}
//创建一个监视的实例对象,用于监视data中属性的变化
const obs=new Observer(data)
console.log(obs)
function Observer(obj){
//汇总对象中所有的属性形成一个数组
const keys=Object.keys(obj)
//遍历
keys.forEach((k)=>{
Object.defineProperty(this,k,{
get(){
return obj[k]
},
set(val){
console.log('${k}被改了')
obj[k]=val
}
})
})
}
</script>
</body>