【Vue 快速入门系列】更新数据页面不渲染问题

最新推荐文章于 2024-08-14 08:39:40 发布

酷尔。

最新推荐文章于 2024-08-14 08:39:40 发布

阅读量4.5k

点赞数 2

分类专栏：网页前端高级编程从入门到精通文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/apple_51931783/article/details/127517780

版权

网页前端高级编程从入门到精通专栏收录该内容

59 篇文章 22 订阅

订阅专栏

文章目录

前言

问题描述：在进行Vue对象的属性内容更新时，可能会发现更新后的数据没有及时渲染到页面中，实际属性中的内容显示正常。
问题根源：为了便于对数据进行监测，Vue在解析数据的时候会为检测到的每一个数据生成一对get,set方法，当用户数据改变的时候，会触发数据的set方法，首先进行数据的修改，然后触发重新解析模板，由下图可以看出数组中没有相应的getset方法，所以在直接进行对象替换时没有重新解析模板。若修改有get、set方法的属性时，可以触发模板的重新解析。

在这里插入图片描述

模拟一个数据监测

为了使问题描述的更加详细，拿来了张天禹老师上课讲课时的例子，重新解析模板的详细操作应写在set方法中（这里仅做模拟）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >

			let data = {
				name:'尚硅谷',
				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>
</html>

数据检测—对象

对于对象得数据监测，Vue会使用递归的方式一直解析到最内层
以确保给每一个对象都生成get、set方法
此过程有两个阶段，第一个是对自己写的data属性进行一下初始化，然后生成_data属性
相修改对象的属性是轻而易举的，因为对象的每一个属性都有get,set方法，如果想要后期
给对象添加属性是比较复杂的，因为直接添加的属性没有get,set方法，在后期维护的时候非常困难
这时我们可以使用：
例：给student添加一个性别属性
student:{
	name:'tom'
}
有以下两种方法：
		Vue.set(this.student,'sex','男')
		this.$set(this.student,'sex','男')

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
        <!-- Vue.Set(obj,k,v) -->
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<h2>校长是：{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性，默认值是男</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="(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:'尚硅谷',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

数据检测—数组

针对文章开始提到的对数组内数据进行更新的问题，我们可以使用数组原生的方法缓解问题。针对以下解决方法我是这么理解的数组内的对象没有设置set方法,数组内的对象的属性设置了set方法，~~数组对象本身有变动Vue对象会感知到，所以直接替换掉对象不可行，调用数组本身的方法，会触让Vue对象感知到，从而触发模板解析。~~（这里是我的一个疑问，为啥呢？）push()、pop()、shift()、unshift()、splice()、sort()、reverse()均可触发模板重新解析。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>更新时的一个问题</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<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:'男'} //不奏效
						this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
					}
				}
			}) 

		</script>
</html>

总结

Vue监视数据的原理：
	1. vue会监视data中所有层次的数据。
	2. 如何监测对象中的数据？
		通过setter实现监视，且要在new Vue时就传入要监测的数据。
			(1).对象中后追加的属性，Vue默认不做响应式处理
			(2).如需给后添加的属性做响应式，请使用如下API：
							Vue.set(target，propertyName/index，value) 或 
							vm.$set(target，propertyName/index，value)
	3. 如何监测数组中的数据？
		通过包裹数组更新元素的方法实现，本质就是做了两件事：
			(1).调用原生对应的方法对数组进行更新。
			(2).重新解析模板，进而更新页面。
	4.在Vue修改数组中的某个元素一定要用如下方法：
		1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
		2.Vue.set() 或 vm.$set()
	特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

在这里插入图片描述