首页 > 其他分享 >每日一题之Vue数据劫持原理是什么？

每日一题之Vue数据劫持原理是什么？

时间：2022-11-09 10:25:18浏览次数：61  
标签：劫持 Vue obj get Object key defineProperty 一题 属性

什么是数据劫持?

定义： 数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。

简单地说，就是当我们 触发函数的时候 动一些手脚做点我们自己想做的事情，也就是所谓的 "劫持"操作

数据劫持的两种方案：

  • Object.defineProperty
  • Proxy

1).Object.defineProperty

  • 语法：

Object.defineProperty(obj,prop,descriptor)

  • 参数：

    • obj:目标对象
    • prop:需要定义的属性或方法的名称
    • descriptor:目标属性所拥有的特性

  • 可供定义的特性列表：

    • value:属性的值
    • writable:如果为false，属性的值就不能被重写。
    • get: 一旦目标属性被访问就会调回此方法，并将此方法的运算结果返回用户。
    • set:一旦目标属性被赋值，就会调回此方法。
    • configurable:如果为false，则任何尝试删除目标属性或修改属性性以下特性（writable, configurable, enumerable）的行为将被无效化。
    • enumerable:是否能在for...in循环中遍历出来或在Object.keys中列举出来。

例子

在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作，并“种下”一个监听器，当数据发生变化的时候发出通知,如下：

var data = {name:'test'}
Object.keys(data).forEach(function(key){
    Object.defineProperty(data,key,{
        enumerable:true,
        configurable:true,
        get:function(){
            console.log('get');
        },
        set:function(){
            console.log('监听到数据发生了变化');
        }
    })
})；
data.name //控制台会打印出 “get”
data.name = 'hxx' //控制台会打印出 "监听到数据发生了变化"

上面的这个例子可以看出，我们完全可以控制对象属性的设置和读取。在Vue中，在很多地方都非常巧妙的运用了Object.defineProperty这个方法，具体用在哪里并且它又解决了哪些问题，下面就简单的说一下：

监听对象属性的变化

它通过observe每个对象的属性，添加到订阅器dep中，当数据发生变化的时候发出一个notice。 相关源代码如下：（作者采用的是ES6+flow写的，代码在src/core/observer/index.js模块里面）

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: Function
) {
  const dep = new Dep()//创建订阅对象  
  const property = Object.getOwnPropertyDe述  //属性的描述特性里面如果configurable为false则属性的任何修改将无效  
  if (property && property.configurable === false) { return }scriptor(obj, key)//获取obj对象的key属性的描
    // cater for pre-defined getter/setters  
    const getter = property && property.get  
    const setter = property && property.set
  let childOb = observe(val)//创建一个观察者对象  
  Object.defineProperty(obj, key, {
    enumerable: true,//可枚举    
    configurable: true,//可修改    
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val//先调用默认的get方法取值      //这里就劫持了get方法，也是作者一个巧妙设计，在创建watcher实例的时候，通过调用对象的get方法往订阅器dep上添加这个创建的watcher实例      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
        }
        if (Array.isArray(value)) {
          dependArray(value)
        }
      }
      return value//返回属性值    
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val//先取旧值      
      if (newVal === value) { return }
      //这个是用来判断生产环境的，可以无视      
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = observe(newVal)//继续监听新的属性值      
      dep.notify()//这个是真正劫持的目的，要对订阅者发通知了    
    }
  })
}

参考 前端vue面试题详细解答

以上是Vue监听对象属性的变化，那么问题来了，我们经常在传递数据的时候往往不是一个对象，很有可能是一个数组，那是不是就没有办法了呢，答案显然是否则的。那么下面就看看作者是如何监听数组的变化：

监听数组的变化

看代码：

const arrayProto = Array.prototype//原生Array的原型
export const arrayMethods = Object.create(arrayProto);
[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse']
.forEach(function (method) {
    const original = arrayProto[method]//缓存元素数组原型  //这里重写了数组的几个原型方法  
    def(arrayMethods, method, function mutator () {
    //这里备份一份参数应该是从性能方面的考虑    
    let i = arguments.length
    const args = new Array(i)
    while (i--) {
      args[i] = arguments[i]
    }
    const result = original.apply(this, args)//原始方法求值    const ob = this.__ob__//这里this.__ob__指向的是数据的Observer    
    let inserted
    switch (method) {
        case 'push':
            inserted = args
            break      
        case 'unshift':
            inserted = args
            break      
        case 'splice':
            inserted = args.slice(2)
            break    
    }
    if (inserted) ob.observeArray(inserted)
    // notify change    
    ob.dep.notify()
    return result
  })
})

...//定义属性
function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
        value: val,
        enumerable: !!enumerable,
        writable: true,
        configurable: true  
    });
}

上面的代码主要是继承了Array本身的原型方法，然后又做了劫持修改，可以发出通知。Vue在observer数据阶段会判断如果是数组的话，则修改数组的原型，这样的话，后面对数组的任何操作都可以在劫持的过程中控制。结合Vue的思想，简单的写个小demo方便更好的理解:

let arrayMethod = Object.create(Array.prototype);
['push','shift'].forEach(function(method){
    Object.defineProperty(arrayMethod,method,{
        value:function(){
            let i = arguments.length
            let args = new Array(i)
            while (i--) {
              args[i] = arguments[i]
            }
            let original = Array.prototype[method];
            let result = original.apply(this,args);
            console.log("已经控制了，哈哈");
            return result;
        },
        enumerable: true,
        writable: true,
        configurable: true    
    })
})
let bar = [1,2];
bar.__proto__ = arrayMethod;
bar.push(3);//控制台会打印出 “已经控制了，哈哈”;并且bar里面已经成功的添加了成员 ‘3’

整个过程看起来好像没有什么问题，似乎Vue已经做到了完美，其实不然，Vue还是不能检测到数据项和数组长度改变的变化，例如下面的调用：

vm.items[index] = "xxx";
vm.items.length = 100;

所以我们尽量避免这样的调用方式，如果确实需要，作者也帮我们实现了一个$set操作，下去自己了解

实现对象属性代理

正常情况下我们是这样实例化一个Vue对象:

var VM = new Vue({ data:{ name:'lhl' }, el:'#id'})

按理说我们操作数据的时候应该是VM.data.name = ‘hxx’才对，但是作者觉得这样不够简洁，所以又通过代理的方式实现了VM.name = ‘hxx’的可能。 相关代码如下：

function proxy (vm, key) {
  if (!isReserved(key)) {
    Object.defineProperty(vm, key, {
      configurable: true,
      enumerable: true,
      get: function proxyGetter () {
        return vm._data[key]
      },
      set: function proxySetter (val) {
        vm._data[key] = val;
      }
    });
  }
}

表面上看起来我们是在操作VM.name，实际上还是通过Object.defineProperty()中的get和set方法劫持实现的。

Object.defineProperty()的缺点

1).不能监听数组的变化

let arr = [1,2,3]
let obj = {}
Object.defineProperty(obj, 'arr', {
  get () {
    console.log('get arr')
    return arr
  },
  set (newVal) {
    console.log('set', newVal)
    arr = newVal
  }
})
obj.arr.push(4) // 只会打印 get arr, 不会打印 set
obj.arr = [1,2,3,4] // 这个能正常 set

数组的以下几个方法不会触发 set： push、pop、shift、unshift、splice、sort、reverse

Vue 把这些方法定义为变异方法 (mutation method)，指的是会修改原来数组的方法。与之对应则是非变异方法 (non-mutating method)，例如 filter, concat, slice 等，它们都不会修改原始数组，而会返回一个新的数组。

2).必须遍历对象的每个属性

使用 Object.defineProperty() 多数要配合 Object.keys() 和遍历，于是多了一层嵌套。如：

Object.keys(obj).forEach(key => {
  Object.defineProperty(obj, key, {
    // ...
  })
})

3).必须深层遍历嵌套的对象

所谓的嵌套对象，是指类似

let obj = {
  info: {
    name: 'eason'
  }
}

如果是这一类嵌套对象，那就必须逐层遍历，直到把每个对象的每个属性都调用 Object.defineProperty() 为止。

给出完整版的数据劫持代码：

const arrayProto = Array.prototype;// 得到原型上的方法
const proto = Object.create(arrayProto)  // 复制一份原型上的方法
    ;['push', 'shift', 'pop', 'splice'].forEach(method => {
        // console.log(method)
        // 重写'push','shift','pop','splice',当然也可以多加几个方法，想加什么就加什么
        proto[method] = function (...args) {
            // console.log(this)  // [ 1, 2, 3, { age: [Getter/Setter] } ]
            updateView();
            arrayProto[method].call(this, ...args)
        }
    })
function updateView() {
    console.log("更新视图成功了...")
}
function observer(obj) {
    if (typeof obj !== "object" || obj == null) {
        return obj
    }
    if (Array.isArray(obj)) {
        // 如果是一个数组要重写数组上原型上的方法 
        Object.setPrototypeOf(obj, proto)
        for (let i = 0; i < obj.length; i++) {
            let item = obj[i];
            observer(item)
        }
    } else {
        for (let key in obj) {
            definedReactive(obj, key, obj[key])
        }
    }
}

function definedReactive(obj, key, value) {
    observer(value)
    Object.defineProperty(obj, key, {
        get() {
            console.log("获取数据成功了...")
            return value;
        },
        set(newValue) {
            if (value !== newValue) {
                observer(newValue)
                value = newValue;
                updateView();
            }
        }
    })
}

let data = { name: [1, 2, 3, { age: 888 }] }
observer(data)
// 数据改变了
// data.name[3].age = 666;  
// push shift unshift pop 也能改变数组中的数组
data.name.push({ address: "xxx" })  // 目的是：更新视图

// 思路：重写Push方法  这些方法在Array的原型上
//      不要把Array原型上的方法直接重写了
//      先把原型上的方法copy一份，去重写（加上视图更新的操作）
//      再去调用最原始的push方法

接下来说一下Object.defineProperty()的升级版 Proxy

2).Proxy数据代理

在数据劫持这个问题上，Proxy 可以被认为是 Object.defineProperty() 的升级版。外界对某个对象的访问，都必须经过这层拦截。因此它是针对 整个对象，而不是 对象的某个属性。

proxy即代理的意思。个人理解，建立一个proxy代理对象（Proxy的实例），接受你要监听的对象和监听它的handle两个参数。当你要监听的对象发生任何改变，都会被proxy代理拦截来满足需求。

var arr = [1,2,3]
var handle = {
    //target目标对象 key属性名 receiver实际接受的对象
    get(target,key,receiver) {
        console.log(`get ${key}`)
        // Reflect相当于映射到目标对象上
        return Reflect.get(target,key,receiver)
    },
    set(target,key,value,receiver) {
        console.log(`set ${key}`)
        return Reflect.set(target,key,value,receiver)
    }
}
//arr要拦截的对象，handle定义拦截行为
var proxy = new Proxy(arr,handle)
proxy.push(4) //可以翻到控制台测试一下会打印出什么

优点：
1.使用proxy可以解决defineProperty不能监听数组的问题，避免重写数组方法；
2.不需要再遍历key。
3.Proxy handle的拦截处理器除了get、set外还支持多种拦截方式。
4.嵌套查询。实际上proxy get()也是不支持嵌套查询的。解决方法：

let handler = {
  get (target, key, receiver) {
    // 递归创建并返回
    if (typeof target[key] === 'object' && target[key] !== null) {
      return new Proxy(target[key], handler)
    }
    return Reflect.get(target, key, receiver)
  }
}

依赖管理方案

说完了上面的，简单说一下 依赖管理方案

Object.defineProperty 只是解决了状态变更后，如何触发通知的问题，那要通知谁呢？谁会关心那些属性发生了变化呢？在 Vue 中，使用 Dep 解耦了依赖者与被依赖者之间关系的确定过程。简单来说：

  • 第一步，通过 Observer 提供的接口，遍历状态对象，给对象的每个属性、子属性都绑定了一个专用的 Dep 对象。这里的状态对象主要指组件当中的data属性。
  • 第二步，创建三中类型的watcher：
    1.调用 initComputed 将 computed 属性转化为 watcher 实例
    2.调用 initWatch 方法，将 watch 配置转化为 watcher 实例
    3.调用 mountComponent 方法，为 render 函数绑定 watcher 实例
  • 第三步，状态变更后，触发 dep.notify() 函数，该函数再进一步触发 Watcher 对象 update 函数，执行watcher的重新计算。

对应下图：

注意，Vue 组件中的 render 函数，我们可以单纯将其视为一种特殊的 computed 函数，在它所对应的 Watcher 对象发生变化时，触发执行render，生成新的 virutal-dom 结构，再交由 Vue 做diff，更新视图。

OK 本章就到此了

标签：劫持,Vue,obj,get,Object,key,defineProperty,一题,属性
From： https://www.cnblogs.com/bbxiaxia1998/p/16872679.html

相关文章

  • Vue技术之“关于sortable排序的使用”
    Vue关于sortable排序的使用方案1在使用sortable后要注意给el-table-column中加入prop="overdueDays"参数，不然会找不到需要排序的数据<el-table-columnprop="overdueDa......
  • Vue 数组中出现__ob__: Observer无法取值
    问题说明在开发项目中经常要从数据库中拿到数组然后复制给新的数组使用，但是会发现有时候会发现带有 __ob__:Observer 数组后缀的就是没有办法取到值，更可怕的是 consol......
  • vue 的 use 和 component
    之前一直没有搞明白use和component的区别今天终于搞明白了，记录一下避免之后忘记 首先每个组件都会提供一个install方法，在这个方法里通过component注册组件另......
  • Vue 项目优化解决方案 有哪些 ？
    1.打包的时候，通过插件把css代码单独抽离出来使用link引入 2.打包的时候，通过webpack内置插件optimization 把公共的js代码抽离出来 ps：打包之后，代码冗余，......
  • vue - vue基础/vue核心内容（2）
    今天的内容书接上回，同样是vue的核心基础部分，今天偏向于理论性，特别是vue对于数据对象的监测那一块，刚开始琢磨了半天，这股劲一过，现在好理解多了10.watch和computed对比计算属......
  • VUE中的路由router
    首先，需要下载去​​Vue.js官网​​​或者​​Vue.js菜鸟教程​​​下载​​vue-router.js插件​​。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建......
  • 基于VUEX的公共存储器store的快速上手流程
    vuex的快速安装与使用​​store公共存储器​​​​state.js添加数据元​​​​mutations.js创建一个方法​​​​在组件中提交：​​​​在组件中使用：​​store公共存储器在使......
  • Vue Router
    VueRouter1.1相关理解1.1.1​​vue-router​​的理解​​Vue​​​的一个插件库，专门用来实现​​SPA​​应用1.1.2对​​SPA​​应用的理解单页​​Web​​应用......
  • vuex 刷新页面 数据不丢失的方法
    exportdefault{name:'app',//加入以下代码解决页面刷新时vueX数据丢失created(){//在页面刷新时将vuex里的信息保存到sessionStorage里window.ad......
  • 系统调用捕获和分析—Ring0层kprobe劫持系统调用
    本文为毕业设计过程中学习相关知识、动手实践记录下来的完整笔记，通过阅读本系列文章，您可以从零基础了解系统调用的底层原理并对系统调用进行拦截。由于本人能力有限，文章中可......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99