使用vue实现数据劫持的原理是什么

使用vue实现数据劫持的原理是什么？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

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实现数据劫持的原理是什么的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！