Vue技术—Vue检测数据的原理

<div id="root">
	<h2>人员列表</h2>
	<button @click="updatamei">更新马冬梅信息<button>
	<ul>
		<li v-for="(p,index) in persons" :key="p.id">
			{{p.name}}-{{p.age}}-{{p.sex}}
		</li>
	</ul>
</div>

new Vue({
	el:"#root",
	data:{
		persons:[
			{id:001,name:'马冬梅',age:18,sex:'女'},
			{id:002,name:'周冬雨',age:19,sex:'女'},
			{id:003,name:'周杰伦',age:20,sex:'男'},
			{id:004,name:'温兆伦',age:20,sex:'男'}
		]
	},
	methods:{
		updatamei(){
			/*
			奏效
			this.persons[0].name = '马老师'
			this.persons[0].age = 50
			this.persons[0].sex = '男'
			*/
			//this.persons[0] = {id:001,name:'马老师',age:50,sex:'男'} 没有检测到
			this.persons.splice(0,1,{id:001,name:'马老师',age:50,sex:'男'})
		}
	}
})