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

十八岁讨厌编程

已于 2022-07-15 00:09:52 修改

阅读量972

点赞数 6

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

于 2022-06-09 13:22:41 首次发布

本文链接：https://blog.csdn.net/zyb18507175502/article/details/125189202

版权

Vue 同时被 2 个专栏收录

41 篇文章 8 订阅

订阅专栏

41 篇文章 1 订阅

订阅专栏

文章目录

问题引入
如何实现针对对象进行数据监测
Vue.set()的使用
如何实现针对数组进行数据监测
数据监测总结

问题引入

我们前面知道只要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>

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

<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>

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

还会有一个小情况：当点击了修改按钮进行修改之后，再打开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>

我们可以看到:
在这里插入图片描述
在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>

错误写法：
①定时器
②使用如下方式

会造成无限递归

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

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

例如，如果data是这样的：

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

使用如上代码是提供不了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>

然后我们给性别属性赋值：
在这里插入图片描述
发现页面并没有发生变化：

我们查看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>

接下来我们对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>

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

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

十八岁讨厌编程

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
3
评论
Vue核心⑨(数据监测原理)

我们前面知道只要data中的数据发生变化，那么Vue会重新解析模板更新数据。那么这一定是决定的吗？我们可以看看下面的例子：我们借用原来的列表案例，对其中的一项进行修改：如果只是对其中对象的属性进行修改，是奏效的：而如果是对其中的对象整体修改，会发现不奏效：如何实现针对对象进行数据监测在前面我们说到数据代理的时候，我们当时说Vue会将中的数据放到中去，然后再将_data中的数据进行代理。其实在Vue将中的数据放到之前，Vue对data中的数据进行了加工，而这个加工的步骤就是Vue实现数据监测的关键。
复制链接

扫一扫