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

    文章目录

    前言

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

    在这里插入图片描述
    在这里插入图片描述

    模拟一个数据监测

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

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Documenttitle>
	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>

    • 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

    数据检测—对象

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    代码：

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理title>
		
		<script type="text/javascript" src="../js/vue.js">script>
        
	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>

    • 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

    数据检测—数组

    针对文章开始提到的对数组内数据进行更新的问题，我们可以使用数组原生的方法缓解问题。针对以下解决方法我是这么理解的数组内的对象没有设置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>

    • 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

    总结

    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的根数据对象 添加属性！！！

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

  • 相关阅读:
    notepad++进行UTF-16编码的时候前面出现FFFE
    对数据库密码使用MD5加密算法加密，并进行登录验证
    简单的介绍一下：柔性数组
    前端做自动化测试 —— 用TDD的思想做组件测试
    [附源码]计算机毕业设计springboot现代诗歌交流平台
    【Rust 日报】2022-09-01 在Rust中用AVX-2和AVX-512过滤矢量
    带你搭一下你的第一个SpringBoot项目
    这就叫速度，并发编程深度解析实战七天杀上 GitHub 榜首
    【深度学习实验】网络优化与正则化（三）：随机梯度下降的改进——Adam算法详解（Adam≈梯度方向优化Momentum+自适应学习率RMSprop）
    FFmpeg —— 录制windows系统声音（附源码）
  • 原文地址：https://blog.csdn.net/apple_51931783/article/details/127517780