深入理解Vue响应式原理

前言

Vue响应式原理是Vue最独特的特性之一，当数据模型进行修改时，视图就会进行更新，这使得状态管理简单直接，但是其底层的细节还是需要我们深入学习理解，这样遇到一些问题我们才能快速进行定位，并解决；下面我将带大家由浅入深，逐步理解Vue的响应式原理；

文章の目录

如何监测数据的变化

要想准确响应数据的变化，首先需要精确及时的监测数据的变化，Vue检测数据的变化核心还是通过Object.defineProperty();下面通过实例为大家详细阐述Vue检测数据变化的过程，代码示例如下：

<script type="text/javascript">let data ={name:'xizhutao',address:'安徽',}//创建一个监视的实例对象，用于监视data中属性的变化const obs =newObserver(data)        
            console.log(obs)//准备一个vm实例对象let vm ={}
            vm._data = data = obs
            functionObserver(obj){//汇总对象中所有的属性形成一个数组const keys = Object.keys(obj)//遍历
                keys.forEach((k)=>{
                    Object.defineProperty(this,k,{get(){return obj[k]},set(val){
                            console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
                            obj[k]= val
                        }})})}</script>

以上代码检测数据变化的思路如下：
一、封装一个Observer构造函数，接收一个data数据对象，通过Object.keys()方法，将接收到的数据对象中的属性存放到一个数组中，然后调用forEach()方法对数组进行遍历，用Object.defineProperty()给this即Observer实例对象添加数组中的每一项属性；
二、通过get、set方法监测数据的操作，一旦Observer构造函数的实例对象上的属性被访问，get函数就会被调用，返回data数据中的属性值，同样的Observer构造函数的实例对象上的属性被修改了，data数据中的属性值也实现了修改；这就是Vue监测数据变化的原理；

注意事项

对象

Vue不能监测对象的Property的添加和删除，在监测数据变化原理中讲到，在Vue初始化实例对象时，会将data对象中的属性存到数组中进行遍历，然后调用Object.defineProperty()给属性添加get ， set方法监视data对象中属性的变化，因此如果我们在初始化实例对象后，给Vue实例添加属性，并不会给添加的属性添加对应的get、set方法，导致添加的属性并不是响应式的；如果你还不理解，请看以下示例代码：

var vm =newVue({data:{a:11}})// vm.a 是响应式的
vm.b =22// vm.b 是非响应式的

以上代码中的a属性在初始化实例对象时就有，因此会生成相对应的get、set方法，然而b属性是在初始化vm实例后添加的属性，因此并没有生成相对于的set和get方法；导致属性b并不是响应式的；
针对以上问题我们可以使用Vue.set(object, propertyName, value)或者vm.$set ( target，propertyName/index，value)方法解决，但是此方法只能给嵌套的对象添加属性，不能给vm或vm的根数据对象添加响应式属性；
代码示例如下：

//someObject为嵌套在data数据对象内的一个对象
Vue.set(vm.someObject,'b',22)
vm.$set(this.someObject,'b',22)

⚠注意：set方法不能给vm或vm的根数据对象设置属性，只能给跟数据对象中嵌套的对象设置属性❗❗❗

数组

Vue不能监测以下数组的变动：1、通过索引号修改数组的对应值，修改后的值不是响应式的；2.通过length修改数组长度时，数据不是响应式的；示例如下：

var vm =newVue({data:{items:['a','b','c']}})
vm.items[1]='x'// 不是响应性的
vm.items.length =2// 不是响应性的

为了解决以上通过索引添加的数据不是响应式的，可以使用以下方法解决：
1、Vue.set(vm.items, indexOfItem, newValue)
2、vm.$set(vm.items, indexOfItem, newValue)
3、vm.items.splice(indexOfItem, 1, newValue)
为了解决通过length属性改变数组长度也是响应式的，可以使用以下方法：
vm.items.splice(newLength)
代码示例如下：

var vm =newVue({data:{items:['a','b','c']}})
Vue.set(vm.items ,0,'aa')// 响应性的
vm.$set(vm.items ,0,'aa')// 响应性的
vm.items.splice(0,1,'aa')//响应性的//通过length
vm.items.splice(2)//响应性的

更详细的信息请查看Vue.js官网：深入理解响应式原理

写在最后

🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞