Vue监控数据响应原理-CFANZ编程社区

Vue 监控数据原理

接下来用一段简单的代码来具体展示一下

<body>
	<div id="app">
        <li>name: {{student.name}}</li>
        <li>age: {{student.age}}</li>
        <li>sex: {{student.sex}}</li>
        <li>address: {{student.address}}</li>
    </div>
    <script>
	let app = new Vue({
		el: "#app",
	    data: {
	    	student: {
	        	name: 'Tom',
	            age: 20,
	            address: 'China',
	            friends: [
	            	{
	                	name: 'Jerry',
	                    age: 19
	                },
	                {
	                    name: 'Kevin',
	                    age: 21
	                }
	            ]
			}
		}
	})
	</script>
</body>

这段代码中我们可以看到，在app的data里面并不存在sex这个属性，但是我们在上面的li标签中使用它是不会报错的。因为浏览器解析的时候会发现sex是一个undefined，然而在Vue中属性值的undefined是不会显示出来的，因此这段代码的运行结果就是下面这样
在这里插入图片描述
然而这个时候我们看到sex后面空空如也，就会想把一个数据加进去，那如何将这个加进去呢？能不能直接像JS一样直接在控制台student.sex="male"就将它展示出来呢？我们来看结果

很显然，在进行此番操作之后页面并没有更新，sex的值也没有如期显示出来，那究竟是什么原因呢？
在这里插入图片描述
原因正是出在了这里。在创建Vue对象的时候，里面写好的每一个属性都会匹配一个setter和getter方法，用来更新页面。而在控制台直接添加的属性，Vue默认不做响应式处理,因此不会生成对应的setter/getter方法，所以不可能产生响应式的数据，自然也不会更新了。但是Vue自身会提供一种方法以至于后添加的数据也能实现响应式的功能，那就是Vue.set(target,key,value)方法。
在这里插入图片描述

当使用该方法后，就能发现sex对应的setter/getter方法已经被创建出来了。
当然这种方法不是唯一的，app.$set()方法就与其功能参数完全一致，在此就不过多赘述了。

但是总是在控制台中修改数据未免太过繁琐，因此我们还有一种方法如下:

//在上面的HTML代码中添加
<button @click="addSex">添加属性</button>

//在Vue实例中添加
methods: {
	addItem(){
    	this.$set(this.student,'sex','male')
    }
}

以上均为本菜狗自己理解，若有错误请多包含指正