Vue监控数据响应原理

闲适_

已于 2022-02-24 23:55:52 修改

阅读量661

点赞数 1

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

于 2022-02-24 23:41:22 首次发布

本文链接：https://blog.csdn.net/m0_56388720/article/details/123114577

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue 监控数据原理

1. vue会监视data中所有层次的数据。
2. vue监测对象中的步骤: vue.data→vue._data(内有set、get方法用于随时更新)→vue.xxx，并且要在创建一个实例对象时就传入要监测的数据。

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

<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()方法就与其功能参数完全一致，在此就不过多赘述了。

那Vue是如何检测数据的呢？其实本质上只做了两件事
1、调用原生对应的方法对数组进行更新。
2、重新解析模板，进而更新页面。

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

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

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

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

闲适_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue监控数据响应原理

Vue 监控数据原理vue会监视data中所有层次的数据。监测对象中的步骤: vue.data→vue._data(内有set、get方法用于随时更新)→vue.xxx，并且要在创建一个实例对象时就传入要监测的数据。
复制链接

扫一扫

专栏目录