文章目录
探讨一下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.Set() API 介绍应用
1. 案例
- 案例页面
<div id="root"> <h1>你好,{{name}}</h1> <hr/> <h2> 学校信息</h2> <h2> 学校名称:{{schoolName}}</h2> <h2> 学校地址:{{schoolAddress}}</h2> </hr> <h2> 学生信息</h2> <h2>学生的姓名:{{student.name}}</h2> <h2>学生的性别:{{student.sex}}</h2> <h2>学生的年龄:真实:{{student.age.rAge}},对外:{{student.age.sAge}}</h2> <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: "安锐捷", schoolName: "天津安锐捷", schoolAddress: "普天科技园", student:{ name: 'tom', age:{ rAge: 40, sAge: 29 }, friends:[ {name: 'jerry',age: 35}, {name: 'tony',age: 36} ] } }, methods: { }, }) </script> ```
2. 需求1 给学生添加性别
给data中 student 添加性别sex属性(data中未定义的属性,如何动态添加进去;)
2.1 获取对象添加性别
- 获取student对象直接添加,然后给student 对象添加 性别 sex 属性,测试效果如下图示例
- 其实从上图可以明确看出来,因为添加的属性没有生成getter/setter方法,不是响应式的,页面监听不到对应属性值发生了变化 ,所以页面不会渲染。
2.2. 添加响应式属性Vue.set() vm.$set()
- Vue 提供了相应的api 可以给对象中添加属性,并且添加的属性为响应式的Vue.set()
- 还可以使用
vm.$set()
来实现添加 如下图示例
2.3. 添加响应式属性的简单写法
Vue.set(vm.student,'sex','男');
vm.$set(vm.student,'sex','男');
3. 需求2: 通过按钮给学生信息,添加一个学生性别属性
页面中默认隐藏 性别 属性字段显示,当点击按钮时,添加显示性别,并添加响应式属性
3.1 页面部分修改
<div id="root">
<h1>你好,{{name}}</h1>
<hr/>
<h2> 学校信息</h2>
<h2> 学校名称:{{school.schoolName}}</h2>
<h2> 学校地址:{{school.schoolAddress}}</h2>
</hr>
<h2> 学生信息</h2>
<h2>学生的姓名:{{student.name}}</h2>
<button @click="addMan"> 添加一个性别属性,默认男</button>
<h2 v-if="student.sex">学生的性别:{{student.sex}}</h2>
<h2>学生的年龄:真实:{{student.age.rAge}},对外:{{student.age.sAge}}</h2>
<h2>朋友们</h2>
<ul>
<li v-for="(friend, index) in student.friends" :key="index">
{{friend.name}} - {{friend.age}}
</li>
</ul>
</div>
3.2 js 部分添加方法
methods: {
addMan(){
// Vue.set(this.student,'sex','男')
vm.$set(vm.student,'sex','男');
}
},
页面演示效果如下:
4. 需求3 通过按钮给学校信息,添加一个校长属性
- 注意:
- Vue.set()Api 中,不允许添加一个响应式的对应在Vue 实例上;
- 所以这块data 中学校的数据结构需要修改一下,如下代码及图例
4.1 页面部分修改
<div id="root">
<h1>你好,{{name}}</h1>
<hr/>
<h2> 学校信息</h2>
<button @click="addLeader"> 添加一个学校属性,默认张校长</button>
<h2 v-if="school.schoolLeader"> 学校校长: {{school.schoolLeader}}</h2>
<h2> 学校名称:{{school.schoolName}}</h2>
<h2> 学校地址:{{school.schoolAddress}}</h2>
</hr>
<h2> 学生信息</h2>
<button @click="addMan"> 添加一个性别属性,默认男</button>
<h2>学生的姓名:{{student.name}}</h2>
<h2 v-if="student.sex">学生的性别:{{student.sex}}</h2>
<h2>学生的年龄:真实:{{student.age.rAge}},对外:{{student.age.sAge}}</h2>
<h2>朋友们</h2>
<ul>
<li v-for="(friend, index) in student.friends" :key="index">
{{friend.name}} - {{friend.age}}
</li>
</ul>
</div>
4.2 js 部分修改
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: "#root",
data: {
name: "安锐捷",
school:{
schoolName: "天津安锐捷",
schoolAddress: "普天科技园",
},
student:{
name: 'tom',
age:{
rAge: 40,
sAge: 29
},
friends:[
{name: 'jerry',age: 35},
{name: 'tony',age: 36}
]
}
},
methods: {
addMan(){
Vue.set(this.student,'sex','男')
},
addLeader(){
Vue.set(this.school,'schoolLeader','张校长')
}
},
})
</script>
页面演示效果如下:
5. Vue.set() 官网API
官网API 如下图所示
【宋】苏轼 《送安惊落第诗》 ------ 故书不厌百回读,熟读深思子自知。
创作不易,欢迎 多多点赞,收藏 有不到位的欢迎指证
邮箱:pymxb1991@163.com
微信:py_mxb