defineProperty y proxy en vue

Tabla de contenido

definir propiedad:

Como todos sabemos, vue2 implementa el secuestro de datos a través de obj.defineProperty. Entonces, ¿cómo funciona obj.defineProperty y cómo vue2 rastrea los cambios de datos?

Cómo funciona obj.defineProperty:**

obj.defineProperty es un método estático proporcionado por ES5, que se usa para definir directamente una nueva propiedad en un objeto, o modificar su nueva propiedad y devolverla, usando el método:

obj.defineProperty(obj,prop,descriptor)

*obj: objeto objetivo

*prop: una cadena o símbolo que especifica la clave de propiedad que se definirá o modificará

*descriptor: el descriptor del atributo a definir o modificar

configurable (público)	Si el atributo predeterminado se puede modificar, el valor predeterminado es falso
enumerable (público)	Si se puede enumerar, el valor predeterminado es falso
escribible (descriptor de datos)	Si es posible modificar el valor de este atributo, el valor predeterminado es falso
valor (descriptor de datos)	valor inicial. Puede ser cualquier valor válido de JavaScript (número, objeto, función, etc.) predeterminado como indefinido
conseguir (descriptor de acceso)	La función que se usará como captador de propiedad, o indefinida si no hay captador . Cuando se accede a la propiedad, esta función se llamará sin argumentos y se establecerá `this` en el objeto al que se accede a través de la propiedad (dado que puede haber una relación de herencia, este puede no ser el objeto sobre el que se define la propiedad). El valor devuelto se utilizará como el valor de esta propiedad. El valor predeterminado no está definido
colocar (descriptor de acceso)	La función que se usará como establecedor de propiedades, o undefined si no hay establecedor . Cuando se asigna un valor a la propiedad, esta función se llamará con un argumento (el valor que se asignará a la propiedad) y se establecerá `this` en el objeto asignado a través de la propiedad. El valor predeterminado no está definido

Hay dos tipos principales de descriptores de propiedades presentes en los objetos: descriptores de datos y descriptores de acceso. Un descriptor de datos es un atributo con un valor escribible o no escribible; un descriptor de acceso es un atributo descrito por un par de funciones getter/setter. Sólo se puede utilizar uno de los dos descriptores.

Ejemplo de uso:

// 数据描述符 
let obj = {
    name: "小明"
  }
  Object.defineProperty(obj,'age',{
    configurable: true, //是否可以被delete
    enumerable: true, //是否可以被for in枚举或者使用Object.keys()获取到,
    writable: true, //定义是否可以被修改,
    value: 100
  })
  console.log("增加属性===",obj.age) //增加属性=== 100
  Object.defineProperty(obj,'name',{
    configurable: true, //是否可以被delete
    enumerable: true, //是否可以被for in枚举或者使用Object.keys()获取到,
    writable: true, //定义是否可以被修改,
    value: "小李"
  })
  console.log("修改属性===",obj.name) //修改属性=== 小李


//访问描述符
let tmp = '测试'
  // 访问器描述符
  Object.defineProperty(obj,'child', {
    configurable: true,
    enumerable: true,
    set(value) {
      console.log("set---")
      tmp = value
    },
    get() {
      console.log("get---")
      return tmp
    }
  })
  console.log("访问描述符==get",obj.child) //get---   访问描述符== 测试
  obj.child = "小花"
  console.log("访问描述符==set",obj.child)
  //set---
  //get---
  //访问描述符==set 小花

En cuanto a obj.defineProperty no puede monitorear matrices y objetos, puede consultar

https://blog.csdn.net/XH_jing/article/details/120413904

En resumen: escuchar cambios en matrices u objetos es demasiado costoso de consumir, por lo que esta solución se abandonó en 2.0

**Cómo vue2 usa obj.defineProperty

Al pasar un objeto de JavaScript común a una instancia de Vue como data opción, Vue recorrerá todas las propiedades de este objeto y usará obj.defineProperty para convertir todas estas propiedades en Getter/setter , de modo que Vue pueda realizar un seguimiento interno de las dependencias y notificar los cambios cuando las propiedades son accedidos y modificados.

apoderado:

Con la aparición de vue3, la respuesta de profundidad de vue cambia de obj.defineProperty a proxy.¿Qué es proxy?

El objeto Proxy se utiliza para crear un proxy de un objeto, a fin de realizar la intercepción y personalización de las operaciones básicas (como búsqueda de propiedades, asignación, enumeración, llamada de función, etc.)

let p = new Proxy(target, handler);

*objetivo: el objeto de destino para usar Proxy el envoltorio (puede ser cualquier tipo de objeto, incluidas matrices nativas, funciones o incluso otro proxy)

*controlador: un objeto que generalmente tiene funciones como atributos, y las funciones en cada atributo definen el p comportamiento del agente cuando realiza varias operaciones