Vue2.0 响应式原理

什么 vue2.0？拜托， 都已经出3.0了。2.0都已经过时了吧！的确vue3.0，在今年普天同庆国庆节的时候终于出来了 那又如何？

vue2.0 的响应式原理你真的会了么？ object.defineProperty()? 然后呢？ 即使在vue3.0已经问世的时代，现在前端面试，问vue2.0的依旧很多啊！你真的能够很清楚的梳理清楚思路，并表达出来么？ 反正我是多少差点意思，哈哈哈，那就盘它！

上菜！

众所周知，vue2.0 的核心原理就是利用Object.defineProperty(); 可以重新定义数据的属性，给属性增加 getter 和 setter

// 首先先定义一个 对象数据
let data = {name :'yolin'}; 
// 那么我们需要对这个数据进行观察；
// 定义一个 observer() 函数
observer(data);

• observer函数

function observer(target) {
  // 首先我们要判断下传递进来的参数是否是对象，所以就有了下面的if判断
  if(typeof target !== 'object' &&　target === null){
  	// 如果传递进来的参数不是对象或者是null，则直接滚粗，return出去
  	 return target;
  }
  // 如果传递进来的参数是对象数据结构， 那就循环，抡它！
   for (let key in target) {
   	 // 在调用一个 下面说到的一个 核心函数了
     // 三个参数 键值对， 属性， 值
     defineReactive(target,key,target[key]);
   }
}

• defineReactive函数

// 开始重写数据的属性，比如get 获取属性值，以及set 设置属性值

function defineReactive(target,key,value){
// 如果是多层数据，比如 let person = {name: 'bryant',age:{n:24}}; 
//这种数据类型 在data中的age属性还是一个对象，即为多层嵌套，所以我们要对这样的value 再次进行观察
  if (typeof value === 'object' &&　value !== null){
	  observer(value);
  }
  // 核心来了
  Object.defineProperty(target,key,{
  	get(){
    	return value
    },
  	set(newValue){
    	if(newValue !== value){
          if (typeof value === 'object' &&　value !== null){
	         observer(value);
          }
          updateView();
          value = newValue();
        }
    },
  })

• updateView 函数（视图更新触发的函数）

function updateView () {
	console.log("更新视图")；
}

• vue2.0缺陷，如果数据层级过多，则会出现大量的递归，造成内存性能损耗

以上就是关于vue2.0 简易版的响应式数据实现的原理 其实也没那么难，敲一遍，再敲一遍，再奖励自己一遍。好像就知道是怎么回事了

完整代码地址 ： github.com/wangziyi052…

• 如有不足，欢迎指正。
• 如果觉得对你有那么些许的帮助，请不要吝啬手中的赞，点一个再走呗！