vue data数据修改_vue数据响应式原理

vue的数据响应式是指当我们修改vue实例中data的数据时，dom元素的内容也会随着数据的变化而变化，这是一个非常实用的功能，能显著提高开发效率。

先上一张图：

这是从官网复制的一张图，可以看到，vue实例中的data被watcher监听，一旦发生变化便会通知watcher，通过watcher触发render函数来更新dom元素。那么这个过程是怎么来的呢。

vue在init的时候大概会有几个阶段进行数据处理

1. initData

这个阶段会对data数据进行代理，遍历data的每个key和value，通过proxy方法将vm[_data][key]代理到vm.key上，以便我们能通过this访问data中的数据

2. Observe--数据劫持

这个阶段是数据响应式的核心，通过Observer出来后的data里面的每个属性会被增加getter和setter，其中getter的作用是收集依赖，setter的作用是发布更新，在实例化vue之后，对data属性的查和改都会触发get和set，从而达到数据响应式。

3. watcher--订阅者

当对数据进行修改之后，通过setter发布更新之后，会依次触发当前的所有依赖，通知对应的watcher调用update进行dom渲染。

虽然vue响应式是非常好用的，但是在某些情况下，对数据的操作还是不能触发的。 比如增加对象的key，或者增加Array的数据，这些都不会实时渲染在界面上的。那么针对这些情况，vue也提供了多种API。

//可以通过这两种方法新增对象的属性，从而达到实时更新
Vue.set(obj,key,value)
this.$set(obj,key,value)

//对于数组可以通过以下其中方法操作，这些都是vue重写的方法，可以进行实时更新
arr.push(...item)
arr.pop()
arr.unshift(...itme)
arr.shift()
arr.splice(index,delcount,newitems)
arr.sort()
arr.reverse()