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')
}
}
以上均为本菜狗自己理解,若有错误请多包含指正