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

一平米

已于 2022-07-13 19:41:40 修改

阅读量171

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-07-10 20:58:58 首次发布

本文链接：https://blog.csdn.net/pymxb1991/article/details/125708537

版权

vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

探讨一下Vue 数据监测的原理

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