VUE第六天今天是2022年6月23日,是我学习vue的第六天今天没经受住诱惑，打了一天的麻将，引以为戒 Vue.se

今天是2022年6月23日,是我学习vue的第六天

今天没经受住诱惑，打了一天的麻将，引以为戒

Vue.set( target, propertyName/index, valu…

参数：
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
返回值：设置的值。
用法：

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<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>

数据更新检测

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

- push() ：用来向数组的末尾添加一个或多个元素，并返回数组新的长度
- pop() ：用来删除数组的最后一个元素，并返回被删除的元素
- shift() ：删除数组的前边的一个元素，并返回被删除的元素
- unshift() ：向数组的前边添加一个或多个元素，并返回数组的新的长度
- splice( index，index2 ) ：可以从一个数组中截取指定的元素 index(包括)，index3(不包括)
- sort() ：用原地算法对数组的元素进行排序，并返回数组；默认将元素转换字符串比较UTF-16 代码单元值
- reverse() ：将数组中元素的位置颠倒，并返回该数组，该方法会改变原数组。

替换数组

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

注意事项

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化

Vue监视数据的原理

Vue会监视data中所有层次的数据
如何监测对象中的数据？

通过setter实现监视，且要在 new Vue 时就传入要监测的数据。

对象中后追加的属性，Vue默认不做响应式处理 1. 如需给后添加的属性做响应式，请使用如下 API：

Vue.set(target, propertyName/index ,value) 或
1. vm.$set(target, propertyName/index ,value)

例：

- 修改第一个爱好为'开车' Vue.set(this.student.hobby,0,'开车2')
- 添加性别属性，默认为男 this.$set(this.student,'sex','男')

如何检测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

调用原生对应的方法对数组进行更新； 1. 更新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法

使用这些API：push(),pop(),shift(),unshift(),splice(),sort(),reverse() 1. Vue.set() 或 vm.$set()

特别注意

Vue.set() 和 vm.$set() 不能给 vm（Vue实例）或 vm 的根数据对象（vm._data）添加属性!!!!