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


Posted in Javascript onMay 01, 2019

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

大致原理是这样的:

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

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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
Vue实现简单计算器
Jan 20 Vue.js
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 #Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 #Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 #Javascript
Vue.extend实现挂载到实例上的方法
May 01 #Javascript
JS html事件冒泡和事件捕获操作示例
May 01 #Javascript
JS实现的贪吃蛇游戏案例详解
May 01 #Javascript
javascript原型链学习记录之继承实现方式分析
May 01 #Javascript
You might like
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python opencv之分水岭算法示例
2018/02/24 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
考试不及格检讨书
2014/01/09 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
个人德育工作总结
2015/03/05 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
利用Apache Common将java对象池化的问题
2022/06/16 Servers