深入理解Vue响应式原理

     阅读:47

前言

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

如何监测数据的变化

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

<script type="text/javascript" >
			let data = {
				name:'xizhutao',
				address:'安徽',
			}
			//创建一个监视的实例对象,用于监视data中属性的变化
			const obs = new Observer(data)		
			console.log(obs)	
			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs
			function Observer(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 = new Vue({
  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 = new Vue({
  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 = new Vue({
  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官网:深入理解响应式原理

写在最后

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