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中的Document文档对象
Jan 16 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
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 FPDF类库应用实现代码
2009/03/20 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
jquery tab标签页的制作
2010/05/10 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
解决python 输出是省略号的问题
2018/04/19 Python
详解python3中zipfile模块用法
2018/06/18 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
中学生学习生活的自我评价
2013/10/26 职场文书
关于毕业的广播稿
2014/01/10 职场文书
小学开学寄语
2014/01/19 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
主要负责人任命书
2014/06/06 职场文书
单方投资意向书
2015/05/11 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
《活见鬼》教学反思
2016/02/24 职场文书