Vue监视数据的原理:
1. vue会监视 data 中所有层次的数据
2. 如何监测对象中的数据?
通过 setter 实现数据监视,且要在 new Vue时就传入要监测的数据。
(1)对象中后追加的属性,Vue默认不做响应式处理
(2)如需给后添加的属性做响应式,请使用如下API:
Vue.set(target, propertyName/index, value) 或
vm.$set(target, propertyName/index, value)
3. 如何监测数组中的数据?
通过包裹数组更新元素的方法实现,本质就是做了两件事:
(1)调用原生对应的方法对数组进行更新
(2)重新解析模板,进而更新页面。
4. 在Vue修改数组中的某个元素一定要用如下方法:
(1)push(), pop(), shift(), unshift(), splice(), sort(), reverse()
(2)Vue.set() 或 vm.$set()
注:Vue.set() 和 vm.$set() 不能给 vm 或 vm的根数据对象添加属性
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
student:{
name: 'hh',
age: 30,
hobby:['唱歌','跳舞','旅游'],
friends:[
{name:'xyz', age:29},
{name:'jerry', age:32}
]
}
},
methods: {
addSex(){ //给 student 添加性别属性
// Vue.set(this.student,'sex','男');
this.$set(this.student,'sex','男');
},
addHobby(){ //添加一个爱好
this.student.hobby.push('学习');
},
modifyFirstHobby(){ //修改第一个爱好
// this.student.hobby.splice(0,1,'打太极');
// Vue.set(this.student.hobby,0,'打太极');
this.$set(this.student.hobby,0,'打太极');
},
addFriend(){ //添加一个朋友
this.student.friends.push({name:'tom',age: 20});
},
modifyFirstFriendName(){ //修改第一个朋友的名字
this.student.friends[0].name = 'MM';
}
},
})
</script>