Sensible realización vue del principio

 características de respuesta Vue

1. Cuando se utiliza un objeto, primero debe declarar, esta propiedad es el tipo de respuesta

2. Para aumentar recursiva getter de datos de objeto y setter 

 3. La matriz de conjuntos de objetos, ayuda sensible un objeto cambia, constantes ningún efecto

4. Modificar la longitud de la matriz y el índice se actualiza no resulta en vista de

5. Si usted es nuevo en los datos (tipo de objeto), vue le ayudará a supervisar

vue escuchar datos pueden ser un objeto, una matriz, u otro valor básico

1. En primer lugar que los datos básicos

// 创建一个观察者函数

function observer(obj) {
 // 判断obj如果不是对象 或者 是 null, 就直接返回
  if (typeof obj !== "object" || typeof obj == null) {
    return obj
  }
 // 判断数据是不是数组
  if (Array.isArray(obj)) {
    
  } else {
    // 否则 就是对象 
    for (let key in obj) {
       // 该函数只处理数据是对象的情况
      defineReactive(obj, key, obj[key])
    }
  }
}
function defineReactive(obj, key, value) {

}
// 测试 
let data = 10

console.log(observer(data)) // 10

Bin primer paso, seguido de tratamiento del objeto se determina es el caso, la función es defineReactive

function defineReactive(obj, key, value) {
  Object.defineProperty(obj, key, {
    get() {
      return value
    },
    set(newValue) {
      if (value !== newValue) {
        value = newValue
        console.log("数据更新:" + newValue)
      }
    }
  })
}
let data = {
  age: 10
}
observer(data)
data.age = 30  // 数据更新:30

Siguiente vistazo a la función, pero ahora modificado data.age = 30, el valor de esta capa, si se trata de un multi-capa de objetos anidados, ya no encuentra actualizada, tal como por debajo de este

let data = {
  age: {
    id: 10
  }
}
observer(data)
data.age.id = 20

La función superior, sólo la primera capa de datos procesados, se sumará getter, organismo, pero después de múltiples anidada, y no aumentar la respuesta de la fórmula 

let data = {
  name: "李四",
  age: {
    id: 10
  }
}
observer(data)
data.age.id = 20
data.name = "王参谋"
console.log(data)

Pero sólo actualiza una vez, por lo que necesitamos recursivas procesamiento de los datos, es decir, los nuevos datos se pueden modificar los objetos, después de atravesar la primera capa, su valor puede ser también un objetivo,

Es necesario tener un observador llamada recursiva en dos lugares (función)

Después de la recursividad

function defineReactive(obj, key, value) {
  observer(value) // 递归处理函数
  Object.defineProperty(obj, key, {
    get() {
      return value
    },
    set(newValue) {
      if (value !== newValue) {
        value = newValue
        observer(value) // 递归函数
        console.log("数据更新:" + newValue)
      }
    }
  })
}
let data = {
  name: "李四",
  age: {
    id: 10
  }
}
observer(data)
data.age.id = 20
data.name = "王参谋"
console.log(data);
console.log(data.age);

Se puede observar después de la recursividad, todos los objetos se añaden a la setter y getter

Entonces el procesamiento Si el valor pasado es una matriz ...