Vue监视数据总结
结论:
Vue监视数据的原理:
1. Vue会监视data中所有层次的数据
2. 如何监测对象中的数据?
通过setter实现监视,且要在new Vue时就传入要监测的数据
(1)对象中后追加的属性,Vue默认不做响应式处理
(2)如需给后添加的属性做响应式,请使用如下API:
Vue.set(target,propertyName/index,value) 或
this.$set(target,propertyName/index,value)
3. 如何监测数组中的数据?
通过包裹数组更新元素的方法实现,本质就是做了两件事:
(1)调用原生对应的方法对数组进行更新
(2)重新解析模版,从而更新页面
4.在Vue修改数组中的某个元素一定要用如下方法:
(1)使用这些API:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
(2)Vue.set() 或 vm.$set()
注意⚠️:Vue.set()和vm.$set() 不能给vm 或 vm的根数据对象添加属性!!!
5.非变更方法:
使用这些API:
filter()
concat()
slice()
注意⚠️:这些方法不会变更原始数组,而是返回一个新的数组,使用这些方法时,可以用新数组替换旧数组。
参考最后一个例子:过滤爱好中的抽烟
<div id="root">
<h1>学生信息</h1>
<button @click="student.age++">年龄+1</button><br/>
<button @click="addSex">添加性别属性,默认是男</button><br/>
<button @click="student.sex == '未知' ">修改性别</button><br/>
<button @click="addFriend">在列表首位添加一个朋友</button><br/>
<button @click="updateFirstFriendName">修改第一个朋友的名字为:陈陈</button><br/>
<button @click="addHobby">添加一个爱好</button><br/>
<button @click="updateHobby">修改第一个爱好为:开赛车</button><br/>
<button @click="removeSmoke">过滤爱好中的抽烟</button><br/>
<h2>姓名:{{student.name}}</h2>
<h2>年龄:{{student.age}}</h2>
<h2 v-if="student.sex">性别:{{student.sex}}</h2>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends">
{{f.name}} --- {{f.age}}
</li>
</ul>
<hr/>
<h2>爱好:</h2>
<ul>
<li v-for="(h,index) in student.hobbys">
{{h}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'atatat',
address:'shanghai',
student:{
name:'张丹',
age: 19,
hobbys:['抽烟','喝酒','烫头'],
friends:[
{
name:'王丹',
age:22,
},
{
name:'李丽',
age:21,
}
]
},
},
methods:{
addSex(){
Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
},
addFriend(){
this.student.friends.unshift({name:'jack',age:20})
},
updateFirstFriendName(){
this.student.friends[0].name = '陈陈'
},
addHobby(){
this.student.hobbys.push('健身')
},
updateHobby(){
this.student.hobbys.splice(0,1,'开赛车')
Vue.set(this.student.hobbys, 0,'开赛车')
this.$set(this.student.hobbys,0,'开赛车')
},
removeSmoke(){
this.student.hobbys = this.student.hobbys.filter((h)=>{
return h !== '抽烟'
})
}
}
})
</script>