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

举报
十八岁讨厌编程 发表于 2022/08/06 01:31:36 2022/08/06
【摘要】 文章目录 问题引入如何实现针对对象进行数据监测Vue.set()的使用如何实现针对数组进行数据监测数据监测总结 问题引入 我们前面知道只要data中的数据发生变化,那么Vue会重新解析模板...

问题引入

我们前面知道只要data中的数据发生变化,那么Vue会重新解析模板更新数据。那么这一定是决定的吗?我们可以看看下面的例子:

我们借用原来的列表案例,对其中的一项进行修改:

如果只是对其中对象的属性进行修改,是奏效的:

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<button @click="updateMei">更新马冬梅的信息</button>
			<ul>
				<li v-for="(p,index) of persons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				methods: {
					updateMei(){
						this.persons[0].name = '马老师' //奏效
						this.persons[0].age = 50 //奏效
						this.persons[0].sex = '男' //奏效
					}
				}
			}) 

		</script>
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

而如果是对其中的对象整体修改,会发现不奏效:

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<button @click="updateMei">更新马冬梅的信息</button>
			<ul>
				<li v-for="(p,index) of persons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				methods: {
					updateMei(){
						// this.persons[0].name = '马老师' //奏效
						// this.persons[0].age = 50 //奏效
						// this.persons[0].sex = '男' //奏效
						this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效

					}
				}
			}) 

		</script>
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

注意:从代码的层面上说其实数据已经被修改,这个可以通过控制台验证验证。但是页面呈现的数据是没有发生变化的。

还会有一个小情况:当点击了修改按钮进行修改之后,再打开Vue的开发者工具会发现数据发生了是修改了之后的(此时页面还是没有改变)。如果我们是打开了Vue开发者工具之后再去进行修改,则Vue开发者工具中的数据仍是修改之前的。

如何实现针对对象进行数据监测

在前面我们说到数据代理的时候,我们当时说Vue会将data中的数据放到_data中去,然后再将_data中的数据进行代理。其实在Vue将data中的数据放到_data之前,Vue对data中的数据进行了加工,而这个加工的步骤就是Vue实现数据监测的关键

我们可以来验证一下:
对于如下代码(简单的在data中放了两个数据):

<body>
		<!-- 准备好一个容器-->
		<div id="root">
            <h1>{{name}} </h1>
            <h1>{{province}}</h1>
            
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#root',
				data:{
					name:'CSDN',
                    province:'湖北'
				}
			}) 

		</script>
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

我们可以看到:
在这里插入图片描述
vm._data中我们可以发现里面的东西并不完全跟data中的一样,说明确实做了一个加工。而这个加工的内容就是多出来的方法。也就是说Vue为每一个数据添加了get和set方法。

Vue通过这个加工就做成了响应式(图中的reactive其实就是响应的意思)。当我们修改数据的时候,就会执行其setter方法,而这个setter方法里面就有一个调用。他让我们的模板重新解析。

完整流程:
改变数据 => 调用setter => 重新解析模板 =>生成新的虚拟DOM => 新旧DOM对比 =>更新页面

其实我们可以尝试粗略的去实现一下数据监视:

	<body>
		<script type="text/javascript" >

			let data = {
				name:'CSDN',
				address:'北京',
			}

			//创建一个监视的实例对象,用于监视data中属性的变化
			const obs = new Observer(data)		
			console.log(obs)	

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs

			function Observer(obj){
				//汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				//遍历
				keys.forEach((k)=>{
					Object.defineProperty(this,k,{
						get(){
							return obj[k]
						},
						set(val){
							console.log(`${k}被改了,我要去解析模板,生成虚拟DOM.....我要开始忙了`)
							obj[k] = val
						}
					})
				})
			}
			
			


		</script>
	</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

错误写法:
①定时器
②使用如下方式
在这里插入图片描述
会造成无限递归

如上的代码只考虑到了一层的情况,也就是说如果出现对象里面还有属性的情况,它发生改变我们是监视不到的。

Vue底层使用递归,它会一直往下找,直到找到某一个东西不再是对象。

例如,如果data是这样的:

			let data = {
				name:'CSDN',
				address:'北京',
				a:{
				  b:1
				}
			}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

使用如上代码是提供不了b的getter和setter的:
在这里插入图片描述
同时Vue里面还使用了数据代理,上面的代码是没有用到的。我们修改数据只能通过_data,而不能直接通过data

如果我们将一个对象藏在了数组里面,Vue也可以把它找出来,并提供相应的getter和setter:
在这里插入图片描述
在这里插入图片描述

Vue.set()的使用

我们现在有一个需求,人物的性别不能确定,我们想要在后期添加,并且能让页面显示。我们的思路是直接添加任务的性别属性,这样就能显示出来了。但这样真的可以吗?

注意:
Vue不会显示一切为Undefine的值
我们可以衍生一下假设a为对象,b为属性(并不存在的)。
a.b如果a存在b不存在,Vue不会报错,并且不显示undifined
如果直接访问b,b不存在,则Vue会报错。

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学生信息</h1>
			<h2>姓名:{{student.name}}</h2>
			<h2>性别:{{student.sex}}</h2>
			<h2>年龄:真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'CSDN	',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
		})
	</script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

然后我们给性别属性赋值:
在这里插入图片描述
发现页面并没有发生变化:
在这里插入图片描述
我们查看vm可以发现,导致页面没有变化的原因是因为新添加的性别属性根本没有getter和setter:
在这里插入图片描述

如果你是先在data中就已经给student定义了sex属性,并且赋值为undefined,那么在数据代理之前的加工步骤中Vue就会为其添加getter和setter,所以再为他赋值是可以改动页面的。
在这里插入图片描述
在这里插入图片描述

也就是说后添加的属性Vue是不会为其做响应式的。也就是说我们需要响应式的数据最好一开始就在源码中定义好。当然Vue也给我们提供了方法去解决后期添加的数据没有响应式的问题,它就是Vue.set()

我们可以尝试一下:
在这里插入图片描述
同时这种方法在vm身上也有一个,它的名字叫$set(),我们也可以试一下:
在这里插入图片描述
但是这个方法也有局限性!

例如:
在这里插入图片描述

在这里插入图片描述

使用这个方法vm以及vm身上的根数据不允许作为target。也就是说只能在data中的对象中才能添加属性,直接在data中加不行。

如何实现针对数组进行数据监测

我们在以上案例的基础上,为student中添加一个属性hobby,其值为数组:
在这里插入图片描述
我们接下来将其爱好用列表进行呈现,代码如下:

		<body>
			<!-- 准备好一个容器-->
			<div id="root">
				<h1>学生信息</h1>
				<h2>姓名:{{student.name}}</h2>
				<h2>性别:{{student.sex}}</h2>
				<h2>年龄:真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
				<h2>朋友们</h2>
				<ul>
					<li v-for="(f,index) in student.friends" :key="index">
						{{f.name}}--{{f.age}}
					</li>
					<li v-for="(h,index) in student.hobby" :key="index">
						{{h}}
					</li>
				</ul>
			</div>
		</body>
	
		<script type="text/javascript">
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
			const vm = new Vue({
				el:'#root',
				data:{
					student:{
						name:'tom',
						// sex:undefined,
						age:{
							rAge:40,
							sAge:29,
						},
						friends:[
							{name:'jerry',age:35},
							{name:'tony',age:36}
						],
                        hobby:['打游戏','打篮球','做作业']
					}
				},
			})
		</script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

接下来我们对hobby列表中的其中一项进行修改,发现页面并没有进行更新。
在这里插入图片描述
我们查看vm,发现Vue并没有为数组中的每一项配置getter和setter方法:
在这里插入图片描述
那么我们怎么能让Vue知道我们修改了数组中的数据呢?

其实Vue中规定了只有使用如下的几种方法对数组进行修改的时候,这种变化才能被监测得到:

  • push() 向数组的末尾添加元素
  • pop() 删除数组的最后一个元素
  • shift() 删除数组的第一个元素
  • unshift() 在数组的开头添加新元素
  • splice() 用于添加和删除元素
  • sort() 对数组进行排序
  • reverse() 对数组进行反转

例如ES6中的filter()方法是不会被监测到的,因为它并不会对原数组造成影响。如果使用filter()我们只需要把副本赋值给原数组即可。(因为数组是由getter和setter方法的,所以可以被监测到,并发生变化)

其实也有其他的方法可以修改并引起响应,我们可以借助于set()方法。例如:
在这里插入图片描述
在这里插入图片描述

不过这种方法我们用的相对较少。

例如:
在这里插入图片描述

那么Vue是如何检测到我们使用了这种办法的呢?这要依赖于一种独特的包装技术 – 包装数组身上的常用的修改数组的方法。

其实我们使用的push,与我们Array.push不是一个方法:
在这里插入图片描述
在这里插入图片描述
我们原来使用的push是沿着原型链往上找,在原型对象上找到的push。而这里的push是Vue给我们写的push,Vue在这个push方法中为我们做了两件事:

  • 调用正常数组的push方法
  • 重新解析模板,生成虚拟DOM········

数据监测总结

我们将前面使用到的api先进行一个复习。案例如下:点击相应按钮,实现对应功能。
在这里插入图片描述
代码如下:

<body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1岁</button> <br/>
        <button @click="addSex()">添加性别属性,默认值:男</button> <br/>
        <button @click="changeSex()">修改性别</button> <br/>
        <button @click.once="addFriend()">在列表首位添加一个朋友</button> <br/>
        <button @click.once="student.friends[0].name = '张三'">修改第一个朋友的名字为:张三</button> <br/>
        <button @click.once="addHobby()">添加一个爱好</button> <br/>
        <button @click.once="$set(student.hobby,0,'开车')">修改第一个爱好为:开车</button> <br/>
        <button @click.once="deleteSmoke()">过滤掉爱好中的抽烟</button> <br/>
        <h3>姓名:{{student.name}}</h3>
        <h3>年龄:{{student.age}}</h3>
        <h3 v-if="student.sex">性别:{{student.sex}}</h3>
        <h3>爱好:</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们:</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el:'#root',
        data:{
            student:{
                name:'tom',
                age:18,
                hobby:['抽烟','喝酒','烫头'],
                friends:[
                    {name:'jerry',age:35},
                    {name:'tony',age:36}
                ]
            }
        },
        methods: {
            addSex(){
                Vue.set(this.student,'sex','男')
            },
            changeSex(){
                if(this.student.sex == '男') this.student.sex = '女'
                else this.student.sex = '男'
            },
            addFriend(){
                this.student.friends.unshift({name:'Linda',age:34})
            },
            addHobby(){
                this.student.hobby.push('玩游戏')
            },
            deleteSmoke(){
                let temp =  this.student.hobby.filter((val) => {
                    return val != '抽烟'
                })

                this.student.hobby = temp
            }
        },

       
    })
</script>
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72

什么是数据劫持?
就是将data中的每一个属性都遍历了一遍,形成getter、setter的形式,这种行为就是数据劫持。
例如我们修改一个属性,会立马被setter劫持到。劫持之后它会正常的帮我们修改数据,另一个就是帮我们重新解析模板。
数据劫持和数据代理都离不开Object.defineProperty()

总结:
在这里插入图片描述

文章来源: blog.csdn.net,作者:十八岁讨厌编程,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/zyb18507175502/article/details/125189202

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。