更新时的一个问题、监测数据的原理_对象、Vue.set()方法、监测数据的原理_数组、总结Vue监视数据——Vue

嘻嘻哈哈二郎神

已于 2023-03-10 12:48:19 修改

阅读量111

点赞数

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

于 2022-12-06 21:19:13 首次发布

本文链接：https://blog.csdn.net/weixin_70320000/article/details/128205495

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

一、更新时的一个问题

当点击按钮时内存中确实把persons[0]那一项的信息修改了，但vue开发工具没有检测到，所以Vue开发工具和页面都不会改变，但其实在控制台打印输出的vm. persons[0]的各个属性已改变
先点按钮再打开开发者工具，会显示修改后的信息，
但先打开开发者工具再点击按钮不会显示修改后的信息

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		<h2>人员列表</h2>
		<button @click="updateMei">更新马冬梅信息</button>
		<ul>
			<li v-for="(p,index) in persons" :key="p.id">				
				{{p.name}}-{{p.age}}-{{p.gender}}
			</li>			
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				persons:[
					{id:'001',name:'马冬梅',age:30,gender:'女'},
					{id:'002',name:'周冬雨',age:19,gender:'女'},
					{id:'003',name:'周杰伦',age:35,gender:'男'},				
					{id:'004',name:'温兆伦',age:50,gender:'男'}				
				],			
			},
			methods:{
				updateMei(){
					// this.persons[0].name = '马老师'  //奏效
					// this.persons[0].age = 17  //奏效
					//this.persons[0] = {id:'001',name:'马老师',age:17,gender:'女'}  //不奏效
					// 当点击按钮时内存中确实把persons[0]那一项的信息修改了，但vue开发工具没有检测到
					// 先点按钮再打开开发者工具，会显示修改后的信息，
					// 但先打开开发者工具再点击按钮不会显示修改后的信息
                    this.persons.splice(0,1,{id:'001',name:'马老师',age:17,gender:'女'})
				}
			}				
		})		
	</script>
</body>
</html>

二、监测数据的原理_对象

Vue 如何检测对象中的数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>

</head>
<body>	
	
</body>
<script type="text/javascript">
    //模拟一个数据监测
	let data = {
        name:'尚硅谷',
        address:'北京'
    }
    
/*     Object.defineProperty(data,'name',{
        get(){
            return data.name   //会报错，超出栈，因为想做的是读取data中的name，get执行，但get返回值也在读取data中的name,会一直递归，死循环
        },
        set(val){
            data.name = val   //报错，改data中的name, set调用,而set也在修改name值，同样死循环，递归
        }
    }) */

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

    // 准备一个vm实例对象
    let vm = {}
    vm._data = data =obs
    function Observer(obj){
        // 汇总对象中所有的属性形成一个数组
        const keys = Object.keys(obj)
        // 遍历
        console.log(keys);
        keys.forEach((k)=>{
            Object.defineProperty(this,k,{  //this 是Observer的实例对象obs
                get(){
                    return obj[k]
                },
                set(val){
                    console.log(`${k}被改了，我要去解析模板，生成虚拟DOM...要开始忙了`)
                    obj[k] = val
                }
            })
        })
    }
    //但上面模拟未考虑多级对象结构
</script>
</html>

三、Vue.set()方法

Vue会为对象中的数据的每一层属性都添加 get，set属性加工后，将其转变为_data，若之前有个对象属性未添加在data中，使用vm._data.student.sex添加不会有set方法，也就不会响应

Vue.set( ) 的使用: 三个参数：target, key(属性)，value(值)

用法：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。

例如Vue.set(vm._data.student, 'sex', '男') 由于数据代理，vm._data.student = vm.student

所以可以精简为 Vue.set(vm.student, 'sex', '男')

vm.$set() 同样也能实现Vue.set（）,实现响应式，vm.$set(vm._data.student, 'sex', '男'),同样精简为 vm.$set(vm.student, 'sex', '男')

Vue.set( ) 、vm.$set( ) 的局限：

只能给data里面的某个对象追加属性，而不能给data追加属性。也就是 vm、vm._data 不允许作为参数target, 注意对象(target)不能是 Vue 实例，或者 Vue 实例的根数据对象。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>	
        //想为页面中添加校长，但数据中刚开始没有leader属性	
        //<h2>校长是：{{leader}}</h2>  //报错，因为 vm中没有leader属性
		<hr>
		<h1>学生信息</h1>
		<button @click="addSex">点我添加性别属性，默认值是男</button>
		<h2>学生姓名: {{student.name}}</h2>
		<h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
		<h2 v-if="student.sex">学生性别: {{student.sex}}</h2>  //不会报错，虽然 student中没有sex属性，对于对象中没有的属性为undefined，vm中有student属性，所以不会报错，刚开始为undefined，同Vue对于是undefined的值不会解析到页面中
		<h2>朋友们</h2>
		<ul>
			<li v-for="(f,index) in student.friends" :key="index">
				{{f.name}}--{{f.age}}
			</li>		
		</ul>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',		
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:28
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:38}
						
					],
				}	
			},
			methods:{
				addSex(){
					Vue.set(this.student,'sex','男')
					// this.$set(this.student,'sex','男')
				}
			}					
		})	
		// Vue.set(vm.student,'sex','男')	//由于数据代理，vm._data.student与vm.student相同
		// vm.$set(vm.student,'sex','女')
	</script>
</body>
</html>

四、监测数据的原理_数组

Vue中数组的数据每一项没有为其设置 get和 set，只有当数组进行破坏性方法时（破坏性方法: push()、pop()、shift()、unshift()、sort()、splice()、reverse()）,Vue才会对页面进行重新解析，触发响应，所以之前修改马冬梅直接用 vm.persons[0] = {....}(赋值操作)不奏效，可以用替换进行操作即可奏效：vm.persons.splice(0, 1, {.....})

注意这些破坏性方法不再是数组原型对象中的方法，其实是Vue 自己写的方法（做了两件事，第一就是调用了数组中的方法，第二就是重新解析模板一系列操作），Vue对数组的监测其实是靠包装数组中的常用的修改数组的方法实现的

		let arr = [1,2,3,23]
		console.log(vm.student.hobby.push === Array.prototype.push);//false
        console.log(arr.push === Array.prototype.push);//true

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		<h2>学校名称：{{school.name}}</h2>
		<h2>学校地址：{{school.address}}</h2>		
		<hr>
		<h1>学生信息</h1>
		<button @click="addSex">点我添加性别属性，默认值是男</button>
		<h2>学生姓名: {{student.name}}</h2>
		<h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
		<h2 v-if="student.sex">学生性别: {{student.sex}}</h2>
		<h2>爱好</h2>
		<ul>
			<li v-for="(h,index) in student.hobby" :key="index">
				{{h}}
			</li>		
		</ul>
		<h2>朋友们</h2>
		<ul>
			<li v-for="(f,index) in student.friends" :key="index">
				{{f.name}}--{{f.age}}
			</li>		
		</ul>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},		
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:28
					},
					hobby:[
						'抽烟','喝酒','烫头'
					],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:38}
						
					],
				}	
			},
			methods:{
				addSex(){
					Vue.set(this.student,'sex','男')
					// this.$set(this.student,'sex','男')
				}
			}					
		})	
		// Vue.set(vm.student,'sex','男')	//由于数据代理，vm._data.student与vm.student相同
		// vm.$set(vm.student,'sex','女')
		
		// Vue.set(vm.student.hobby,1,'打台球')

		let arr = [1,2,3,23]
		console.log(vm.student.hobby.push === Array.prototype.push);//false
        console.log(arr.push === Array.prototype.push);//true
	</script>
</body>
</html>

五、总结Vue监视数据

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( )、sort( )、splice( )、reverse( )

(2). Vue.set( )、 vm.$set( )

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如filter（）、concat( ) 和 slice( )。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：如下例子：

                //过滤掉爱好数组中的抽烟元素
				removeSmoke(){
					const arr = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
					this.student.hobby = arr
				}

特别注意：Vue.set( ) 和 vm.$set( ) 不能给vm 或 vm的根数据对象 添加属性！！！

所谓数据劫持就是将data配置项中的数据放到vm 中的 _data时，不是直接复制，而是为其每一个属性都配了set, get，这个行为/操作被称为数据劫持。劫持之后做两件事，一是正常修改数据，二是对模板进行重新解析。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>	
	<div id="root">
		<h1>学生信息</h1>

		<button @click="student.age++">年龄+1岁</button><br>
		<button @click="addSex">添加性别属性,默认值：男</button><br>
		<button @click="student.sex = '未知' ">修改性别属性</button><br>
		<button @click="addFriend">在列表首位添加一个朋友</button><br>
		<button @click="updateFirstName">修改第一个朋友的名字：张三</button><br>
		<button @click="addHobby">添加一个爱好</button><br>
		<button @click="updateHobby">修改第一个爱好为：开车</button><br>
		<button @click="removeSmoke">过滤掉爱好中的 ‘抽烟’</button><br>

		<h2>姓名: {{student.name}}</h2>
		<h2>年龄：{{student.age}}</h2>
		<h2 v-if="student.sex">性别：{{student.sex}}</h2>
		<h2>爱好：</h2>
		<ul>
			<li v-for="(h,index) in student.hobby" :key="index">
				{{h}}
			</li>		
		</ul>
		<h2>朋友们</h2>
		<ul>
			<li v-for="(f,index) in student.friends" :key="index">
				{{f.name}}--{{f.age}}
			</li>		
		</ul>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{		
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:38}						
					],
				}	
			},
			methods:{
				addSex(){
					Vue.set(this.student,'sex','男')
					//this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'hh',age:8})
				},
				updateFirstName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')//这几种方法都可以
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					const arr = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
					this.student.hobby = arr
				}
			}					
		})			
	</script>
</body>
</html>