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

目录

• 前言
• 使用Object.defineProperty()定义属性
• 使用Object.defineProperty()实现双向数据绑定

• 如果操作数组呢？

• Proxy用法
• Object.defineProperty 和 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进行劫持。