写点什么

深入理解 vue2.x 中 Object.defineproperty() 和 vue3.x 中 Proxy

作者:不叫猫先生
  • 2023-04-29
    北京
  • 本文字数:2315 字

    阅读完需:约 8 分钟

深入理解vue2.x中Object.defineproperty()和vue3.x中Proxy

前言

vue2.x 中数据的双向绑定主要通过 Object.defineproperty()方法实现,data 中的数据改变通过Object.defineProperty()对属性设置 set 属性,获取通过 get 属性,Object.defineProperty 的作用就是劫持一个对象的属性,通常我们对属性的 getter 和 setter 方法进行劫持,在对象的属性发生变化时进行特定的操作。而 vue3.x 主要是通过 proxy 实现, proxy 在目标对象的外层搭建一层拦截,外界对目标对象的某些操作,必须通过这层拦截。

使用 Object.defineProperty()定义属性

当使用了 get 或 set 方法,不允许使用 writable 和 value 这两个属性(如果使用,会直接报错滴)



Object.prototype.high = "172";var obj = { name: "张三",};//定义一个属性Object.defineProperty(obj, 'age', { get: function () { console.log("get-------------") return number }, set: function (val) { console.log("set-------------") number = val; }})
复制代码


  • console.log(obj)



  • console.log(obj.age)

  • console.log(obj.age = 1)

使用 Object.defineProperty()实现双向数据绑定

<input id="myInput" type="text" /><div id="datavalue" type="text"></div>
复制代码


  Object.defineProperty(obj, 'data', {    get: function () {      console.log('get----------------')      return ''    },    set: function (val) {      console.log('setset----------------')      document.getElementById('myInput').innerText = val;      document.getElementById('datavalue').innerText = val;    }  })  function watchProperty(obj, property, val) {    Object.defineProperty(obj, property, {      get: function () {        console.log('get----------------')        return val      },      set: function (newVal) {        console.log('set----------------')        val = newVal;      }    })  }  //循环遍历属性,添加响应式  Object.keys(obj).forEach(key => {    watchProperty(obj, key, obj[key])  })
复制代码


当我们在输入框中输入数据,则触发 set 方法


如果操作数组呢?

    function watchProperty(obj, property, val) {      Object.defineProperty(obj, property, {        get: function () {          console.log('get----------------')          return val        },        set: function (newVal) {          console.log('set----------------')          val = newVal;        }      })    }    function observe(arr1) {      Object.keys(arr1).forEach(key => {        watchProperty(arr1, key, obj[key])      })    }    let arr1 = [1, 2, 3, 4]    observe(arr1)
复制代码


  • arr1[0]触发 get

  • arr1[1] = 7触发 set-arr1.push() 或者 arr1.unshift()get、set 均不会触发

  • arr1.shift() 或者 arr1.pop()

  • pop 会触发 get,arr1 更新;shift 触发 get、set,arr1 更新


总结:


  • 通过索引访问或设置对应元素的值时,可以触发 getter 和 setter 方法。

  • 通过 push 或 unshift 会增加索引,对于新增加的属性,需要再手动初始化才能被 observe。

  • 通过 pop 或 shift 删除元素,会删除并更新索引,也会触发 setter 和 getter 方法。

Proxy 用法

Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写Proxy(target,handler)表示生成一个Proxy实例target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。


  let p = {    name: "王五",    age: "12",    arr: [1, 2, 3]  };  let w = [5, 6, 7]  const handler = {    get(obj, key) {      console.log('get------------')      return obj[key]    },    set(obj, key, value) {      console.log('set------------')      obj[key] = value;      //set 要返回一个boolean值      return true    },  }  let a = new Proxy(p, handler)  let b = new Proxy(w, handler)
复制代码


  • console.log(a.name)触发 get

  • a.sex = "男" 触发 set

  • b.push(1)、b.unshift()、b.pop()、b.shift()均触发 get、set

Object.defineProperty 和 Proxy 对比存在哪些优缺点呢?

  • Object.defineProperty 只能劫持对象的属性,而 Proxy 是直接代理对象。由于 Object.defineProperty 只能对属性进行劫持,需要遍历对象的每个属性,如果属性值也是对象,则需要深度遍历。而 Proxy 直接代理对象,不需要遍历操作。

  • Object.defineProperty 对新增属性需要手动进行 Observe。于 Object.defineProperty 劫持的是对象的属性,所以新增属性时,需要重新遍历对象,对其新增属性再使用 Object.defineProperty 进行劫持。也正是因为这个原因,使用 Vue 给 data 中的数组或对象新增属性时,需要使用 vm.$set 才能保证新增的属性也是响应式的。

  • Proxy 支持 13 种拦截操作

总 结

  • Object.defineProperty 并非不能监控数组下标的变化,Vue2.x 中无法通过数组索引来实现响应式数据的自动更新是 Vue 本身的设计导致的,不是 defineProperty 本身原因。

  • Object.defineProperty 和 Proxy 本质差别是,defineProperty 只能对属性进行劫持,所以出现了需要递归遍历,新增属性需要手动 Observe 的问题。

  • Proxy 可以直接代理对象并且返回一个新对象,而不像 Object.defineProperty()劫持对象的属性,需要遍历对象的每个属性,如新增属性时,需要重新遍历对象,对其新增属性再使用 Object.defineProperty 进行劫持。

发布于: 刚刚阅读数: 4
用户头像

还未添加个人签名 2022-10-18 加入

还未添加个人简介

评论

发布
暂无评论
深入理解vue2.x中Object.defineproperty()和vue3.x中Proxy_Vue_不叫猫先生_InfoQ写作社区