3分钟了解vue数据劫持的原理实现

更新时间：2019年05月01日 15:02:37 作者：海明月

这篇文章主要介绍了3分钟了解vue数据劫持的原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

目的: 了解Object.defineProperty如何实现数据劫持

大致原理是这样的：

定义一个监听函数，对对象的每一个属性进行监听
通过Object.defineProperty对监听的每一个属性设置get 和 set 方法。
对对象实行监听
对对象内嵌对象进行处理
对数组对象进行处理

1. 先定义一个对象

let obj = {
 name: 'jw'
}

2. 定义一个监听函数

/**
* 判断监听的是否是对象
* 如果是对象，就遍历，并且对每个属性进行定义get 和 set
*/

function observer(obj) {
 if(typeof obj === 'object') {
  for (let key in obj) {
  // defineReactive 方法设置get和set，见第三步
   defineReactive(obj, key, obj[key]);
  }
 }
}

3.定义一个函数，处理每个属性

function defineReactive(obj, key, value) {
 Object.defineProperty(obj, key, {
  get() {
   return value;
  },
  set(val) {
   console.log('数据更新了')
   value = val;
  }
 })
}

ok. 到这里初版已经实现了。尝试一下吧

observer(obj);
obj.name = 'haha'

控制台输出:
//数据更新了

以上已经实现设置obj的属性的时候，被监听到，并且可以去执行一些代码了。但是，如果对象里面嵌入了对象呢？比如:

let obj = {
 name: 'jw',
 age: {
  old: 60
 }
}

执行以下代码

observer(obj);
obj.age.old = '50'

控制台输出: 空

4.对监控的obj进行迭代处理

// 修改defineReactive ， 添加一行代码
function defineReactive(obj, key, value) {
 // 如果对象的属性也是一个对象。迭代处理
 observer(value);
 Object.defineProperty(obj, key, {
  //....
 })
}

再执行以下代码:

observer(obj);
obj.age.old = '50'

控制台输出:
//数据更新了

可惜的是，如果对象是一个数组，Object.defineProperty就无法起作用了，比如:

obj.skill = [1, 2, 3];
obj.age.push(4);

控制台输出:
//空

实际上，不止push，包括slice，shift，unshif...都是没有作用.

5. 重写数组的方法

let arr = ['push', 'slice', 'shift', 'unshift'];
arr.forEach(method=> {
 let oldPush = Array.prototype[method];
 Array.prototype[method] = function(value) {
  console.log('数据更新了')
  oldPush.call(this, value)
 }
})

再执行以下代码:

obj.skill = [1, 2, 3];
obj.skill.push(4);

控制台输出:
//数据更新了

但是，数组的length操作仍然是无效的。这也是为什么vue中只能通过方法去改变数组的原因了。

总结: Object.defineProperty只是解决了状态变更后，如何触发通知的问题，那要通知谁呢？谁会关心那些属性发生了变化呢？以后再说。

以下完整代码

let obj = {
 name: 'jw',
 age: {
  old: '60'
 }
}

// vue 数据劫持 Observer.defineProperty

function observer(obj) {
 if(typeof obj === 'object') {
  for (let key in obj) {
   defineReactive(obj, key, obj[key]);
  }
 }
}

function defineReactive(obj, key, value) {
 observer(value);

 Object.defineProperty(obj, key, {
  get() {
   return value;
  },
  set(val) {
   console.log('数据更新了')
   value = val;
  }
 })
}
observer(obj);


// obj.age.old = '50'


// Object.defineProperty 对 数组无效
let arr = ['push', 'slice', 'shift', 'unshift'];

arr.forEach(method=> {
 let oldPush = Array.prototype[method];
 Array.prototype[method] = function(value) {
  console.log('数据更新了')
  oldPush.call(this, value)
 }
})
obj.skill = [1, 2, 3];
obj.skill.push(4);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解如何在vue项目中引入elementUI组件
这篇文章主要介绍了详解如何在vue项目中引入elementUI组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
Vue 实现从小到大的横向滑动效果详解
这篇文章主要介绍了Vue 实现从小到大的横向滑动效果,结合实例形式详细分析了vue.js横向渐变滑动效果的实现步骤、相关操作技巧与注意事项,需要的朋友可以参考下
2019-10-10
vue实现修改图片后实时更新
今天小编就为大家分享一篇vue实现修改图片后实时更新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue3项目中使用three.js的操作步骤
最近在学习Three.js相关的技术,恰逢Vue 3.0正式版也已推出,下面这篇文章主要给大家介绍了关于vue3项目中使用three.js的操作步骤,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01
vue实现发送短信倒计时和重发短信功能的示例详解
这篇文章主要给大家介绍了vue实现发送短信倒计时和重发短信功能的相关知识,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
2023-12-12
关于vue组件的更新机制 resize() callResize()
这篇文章主要介绍了关于vue组件的更新机制 resize() callResize()，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
解决vue项目,npm run build后,报路径错的问题
这篇文章主要介绍了解决vue项目,npm run build后,报路径错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue element项目引入icon图标的方法
这篇文章主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下
2018-06-06
vue实现tagsview多页签导航功能的示例代码
这篇文章主要介绍了vue实现tagsview多页签导航功能,本文梳理了一下vue-element-admin项目实现多页签功能的整体步骤，需要的朋友可以参考下
2022-08-08
vuex state及mapState的基础用法详解
这篇文章主要介绍了vuex state及mapState的基础用法详解,本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友跟随脚本之家小编一起学习吧
2018-04-04