探讨一下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

探讨Vue 数据监测原理-第四节-Vue.Set() API 介绍应用相关推荐

1. 探讨Vue 数据监测原理-第五节-展开介绍 Vue中监测-【数组】数据的原理

   文章目录 探讨一下Vue 数据监测的原理 本次探讨共的第五个章节 第五节:展开介绍 Vue中监测-[数组]数据的原理 1. 案例 1.1. 页面案例 2. 数组形式|对象形式爱好的区别 2.1. 页面 ...

2. GIS开发之二维地下管线综合管理系统（Arcgis）第四节 使用arcgis api for js 加载天地图

   GIS开发之二维地下管线综合管理系统(Arcgis)第四节 使用arcgis api for js 加载天地图 核心js文件 调用方式 调用结果 核心js文件 #通过定义加载天地图js文件,引用并组织 ...

3. Vue核心⑨(数据监测原理)

   文章目录 问题引入 如何实现针对对象进行数据监测 Vue.set()的使用 如何实现针对数组进行数据监测 数据监测总结 问题引入 我们前面知道只要data中的数据发生变化,那么Vue会重新解析模板更新 ...

4. vue数据改变渲染问题_解决Vue中页面成功渲染数据undefined的问题

   前言 这个标题不太好取. 本文需要下面的知识:https://zhuanlan.zhihu.com/p/260811233​zhuanlan.zhihu.com 问题描述 我最近的一个功能需求是通过a ...

5. 每日一题之Vue数据劫持原理是什么？

   什么是数据劫持? 定义: 数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果. 简单地说,就是当我们 触发函数的时候 动一些手脚做点我们自己想做的 ...

6. 仓储系统 wms 数据中心 数据员操作指南 第四节 预拨单准备 配货员安排 第二部分 出货信息表 格式设置

   1.选择一个单元格 ctrl+A 找到右边小三角形 文本转数值 2.选择表头后的整行ctrl+shift+↓ 向下全选 除了表头的数据行 设置行高 36 3.选择表头 ctrl + shift +l ...

7. elasticsearch 6.x (四) 单一文档 API 介绍和使用 index和get API

   大家好,我是烤鸭: 今天分享的是官网6.x    单一文档(Single document APIs)APIs. 本文这是部分翻译,如果想看全部的,还是建议阅读官方api.链接: https://ww ...

8. 【重学Vue】数据响应原理真的是双向绑定吗？

   最近 Ant Design Vue 作者 - 唐金州,在某平台开课了,在整个课程中系统的讲述了Vue的开发实战.在第八讲中介绍了Vue双向绑定的问题,这里我整理一些资料客观的分析一下 Vue数据响应原 ...

9. Vue数据响应式原理：Observe、Dep、Watcher

   在Vue中,数据响应式Observe是通过使用闭包来实现的.简单来说,就是利用了JavaScript中函数作用域链的特性,将数据对象以及相关的数据操作函数保存在闭包内部,从而达到对数据的监听.更新等操 ...

最新文章

1. Eclipse创建web工程时，报错Dynamic Web Module 3.0 requires Java 1.6 or newer.
2. MySQL基础：数据类型
3. 详解 Pandas 与 Lambda 结合进行高效数据分析
4. 如何打开MDI文档！
5. LeetCode Rotate List
6. NBear.Mapping使用教程(3):第一个简单例子
7. Delphi的System.Str - 将数字格式化为字符串
8. 一个列表中按钮的不同样式
9. springcloud入门实战进阶百度云，【MyBatis 5(1)
10. 25.使用getScript()方法异步加载并执行js文件
11. LeetCode 343. 整数拆分(Integer Break) 25
12. linux音频alsa-uda134x驱动文档阅读之一（over-view)
13. 通过yum安装Oracle instant client
14. NOD32离线升级更新包使用方法
15. c语言测试你的性格,著名人格测试：五张图看出你的性格
16. python语音识别库kaldi_Kaldi 使用 DFSMN 训练语音模型
17. java 问号运算符_JAVA问号?运算符的用法，问号表达式
18. 计算思维(美国CMU周以真教授)
19. 独立站卖家如何利用Google广告引流
20. LTE：RA-RNTI、T-CRNTI、C-RNTI

热门文章

1. 浅议大数据时代下消防工作、生活和思维的变革
2. 《机器学习》周志华课后习题答案——第五章（1-7已完结）
3. Python 3 字符串 center( ) 方法
4. 互联网奠基人：温顿·瑟夫自曝新冠病毒检测呈阳性
5. 《那些年啊，那些事——一个程序员的奋斗史》十三
6. 农场元宇宙Plato Farm，乌托邦式田园生活
7. JMeter基本使用
8. 仪器仪表制造业采购数字化方案：集中采购系统为供采双方打造更高效运转平台
9. 存储过程——天使还是魔鬼
10. nyist737 石子合并