探讨一下Vue 数据监测的原理
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
Vue 教程 https://cn.vuejs.org/v2/guide/
MDN Web Docs 社区 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
本次探讨共的第六章节
第六节- Vue监测数据-做小案例进行回顾
这一节主要侧重于回顾,总结
1. 案例
<div id="root">
<h1>你好,{{name}}</h1>
<hr/>
<h2> 学生信息</h2>
<span>需求1. 给学生的年龄加1岁 </span>
<button @click="addAge">年龄加1</button>
</br>
<span>需求2. 给学生的性别属性,默认值为 男 </span>
<button @click="addSex">添加性别</button>
<button @click="updateSex">修改性别</button>
</br>
<span>需求3. 给学生朋友的首位添加一个朋友 </span>
<button @click="addFriend">首位添加朋友</button>
</br>
<span>需求4. 修改第一个朋友的名子为:“张三” </span>
<button @click="updateFriend">修改第一个朋友名子为张三</button>
</br>
<span>需求5. 添加一个爱好:学习 </span>
<button @click="addHobby">添加一个爱好</button>
</br>
<span>需求6. 修改第一个爱好:开车 </span>
<button @click="updateHobby">修改爱好</button>
</br>
<span>需求7. 过滤掉爱好中的抽烟 </span>
<button @click="filterHobby">过滤抽烟</button>
<h2>学生的姓名:{{student.name}}</h2>
<h2 v-if="student.sex">学生的性别:{{student.sex}}</h2>
<h2>学生的年龄:{{student.age}}</h2>
<h2>爱好</h2>
<ul>
<li v-for="(item, index) in student.hobbys" :key="index">
{{item}}
</li>
</ul>
<h2>朋友们</h2>
<ul>
<li v-for="(friend, index) in student.friends" :key="index">
{{friend.name}} - {{friend.age}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: "#root",
data: {
name: "安锐捷",
student:{
name: 'tom',
age: 18,
hobbys:['抽烟','喝酒','汤头'],
friends:[
{name: 'jerry',age: 35},
{name: 'tony',age: 36}
]
}
},
methods: {
addAge (){
this.student.age++;
},
addSex(){
//this.student.sex = '男'; //无效的写法
Vue.set(vm.student,'sex','男');
//vm.$set(vm.student,'sex','男')
},
updateSex(){
this.student.sex = '女';
},
addFriend(){
this.student.friends.unshift({name:'jack',age:18})
},
updateFriend(){
this.student.friends.splice(0,1,{name:'张三',age:18});
},
addHobby(){
this.student.hobbys.push('学习')
},
updateHobby(){
this.student.hobbys.splice(0,1,'开车');
},
filterHobby(){
this.student.hobbys = this.student.hobbys.filter(function (item) {
return item !== '抽烟' })
}
},
})
2. 总结
- Vue 监视数据的原理:
- Vue 会监视 data 中所有层次的数据。
- 如何监测对象中的数据?
通过setter 实现监测,且要在new Vue 时就传入要监测的数据- 对象中如果后期追加属性,Vue 默认不做响应式处理;
- 如需要给后期添加的属性做响应式,请用如下API:
Vue.set(target, propertyName/index, value)
vm.$set(target, propertyName/index, value)
- 如何监测数组中的数据?
通过包裹数组更新元素的方法实现,本质就是做了两件事:- 调用原生对应的方法对数据进行更新。
- 重新解析模板,进而更新页面
- 在Vue 修改数组中的某个元素一定要用如下方法:
- 使用这些API: push()、pop()、shitf()、unshit()、splice()、sort()、reverse()
Vue.set()
或vm.$set()
- 特别注意:
Vue.set()
和$set()
不能给vm 或 vm 根数据对象添加属性
终于完结啦 !!
宋.张孝祥 《论治体札子》—— 立志欲坚不欲锐,成功在久不在速
创作不易,欢迎 多多点赞,收藏 各节里面总结的还有不到位的欢迎指证
邮箱:pymxb1991@163.com
微信:py_mxb