vue 데이터 응답식 원리 실현

이 글은 주로 vue 응답식 원본을 이해하지 못하거나 접촉한 적이 없는 젊은이들에게 보여주는 것이다. 그 주요 목적은 vue의 응답식 원리에 대해 기본적인 인식과 이해를 하는 데 있다. 만약에 면접에서 이런 질문을 받으면 면접관이 당신에게 대답하고 싶은 것이 무엇인지 알 수 있다."PS: 글에 틀린 점이 있으면 친구들의 지적을 환영합니다"

호응적 이해

응답식은 말 그대로 데이터 변화로 보기의 업데이트를 일으킨다.이 글은 주로 vue2.0의 대상과 그룹 응답식 원리의 실현을 분석하고 수집과 보기 업데이트에 의존하여 다음 글에 남겨 둡니다.
vue에서 우리가 말한 응답식 데이터는 일반적으로 그룹 형식과 대상 형식의 데이터를 가리킨다.vue 내부는 Object를 통과합니다.defineProperty 방법은 대상의 속성을 납치하고 수조는 수조를 다시 쓰는 방법으로 이루어진다.다음은 간단하게 실현하겠습니다.
우선 차단해야 할 데이터를 정의하겠습니다.

const vm = new Vue({
 data () {
  return {
   count: 0,
   person: { name: 'xxx' },
   arr: [1, 2, 3]
  }
 }
})
let arrayMethods
function Vue (options) { //   data  
 let data = options.data
 if (data) {
  data = this._data = typeof data === 'function' ? data.call(this) : data
 }
 observer (data)
}
function observer(data) { 
 if (typeof data !== 'object' || data === null) {
  return data
 }
 if (data.__ob__) { //   __ob__  ， 
  return data
 }
 new Observer(data)
}

여기 array Methods, Observer, __ob__실현과 역할 계속 내려다보세요.

Observer 클래스 구현

class Observer {
 constructor (data) {
  Object.defineProperty(data, '__ob__', { //   data   __ob__  ， 
   enumerable: false, //  
   configurable: false, //  
   value: this //   Observer  
  })
  if (Array.isArray(data)) { //  
   data.__proto__ = arrayMethods //  
   this.observerArray(data)
  } else { //  
   this.walk(data)
  }
 }
 walk (data) {
  const keys = Object.keys(data)
  for(let i = 0; i < keys.length; i++) {
   const key = keys[i]
   defineReactive(data, key, data[key])
  }
 }
 observerArray (data) { //  
  data.forEach(value => observer(value))
 }
}

대상의 차단

대상의 납치에 주의해야 할 몇 가지:

대상을 훑어보고 값이 대상 유형이라면 Observer 관측 방법을 다시 호출해야 합니다

설정된 새 값이 대상 유형이면 차단해야 합니다

//  
function defineReactive(data, key, value) {
 observer(value) //   value  ， 
 Object.defineProperty(data, key, {
  get() {
   return value
  },
  set(newValue){
   if (newValue === value) return
   value = newValue
   observer(newValue) //   newValue  ， 
  }
 })
}

수조의 납치

수조의 납치에 주의해야 할 몇 가지:

수조는 함수 납치(절편 프로그래밍)를 사용하는 사상으로 데이터를 차단한다

수조에 새로 추가된 값은 대상 유형이라면 다시 차단되어야 한다

const oldArrayPrototype = Array.prototype
arrayMethods = Object.create(oldArrayPrototype)
const methods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'] //  
methods.forEach(method => {
 arrayMethods[methods] = function (...args) {
  const result = oldArrayPrototype[methods].call(this, ...args)
  const ob = this.__ob__ // this  
  let inserted; //  ， 
  switch(methods) {
   case 'push': 
   case 'unshift':
    inserted = args
   case 'splice':
    inserted = args.slice(2) //   splice  
  }
  if (inserted) {
   ob.observerArray(inserted)
  }
  return result
 }
})

원리 총결

면접에서 만약에 우리가 손으로 vue의 응답식 원리를 써야 한다면 위의 코드는 충분하다.그러나 우리는 vue의 원본을 학습함으로써 면접에서 다음과 같은 총괄적인 대답을 할 수 있다면 면접관의 주목을 받을 수 있다.
vue 2.0 소스의 응답 방식:

귀속적인 방식으로 대상을 차단하기 때문에 데이터의 등급이 깊을수록 성능이 떨어진다

배열은 Object를 사용하지 않습니다.defineProperty의 방식을 차단하는 것은 그룹 항목이 너무 많으면 성능이 나빠지기 때문이다

데이터에 정의된 데이터만 차단되고 후기에 우리는 vm를 통과했다.newObj ='xxx'같은 실례에 추가된 방식으로 추가된 속성은 차단되지 않습니다

수조의 색인과 길이를 바꾸면 차단되지 않기 때문에 보기의 업데이트를 일으키지 않습니다

데이터에 추가된 속성과 그룹의 색인, 길이를 변경하려면 차단해야 합니다. $set 방법을 사용할 수 있습니다

Object를 사용할 수 있습니다.freeze 방법은 데이터를 최적화하고 성능을 향상시키며, 이 방법을 사용한 데이터는 set와 get 방법을 다시 쓰지 않습니다

vue 3.0 소스 응답 방식:

3.0 버전에서는 개체 대신 프록시를 사용했습니다.defineProperty는 13중 차단 방식이 있어 대상과 수조를 각각 처리할 필요가 없고 귀속적으로 차단할 필요가 없다. 이것도 성능을 향상시키는 가장 큰 부분이다

vue 3.0 버전 응답식 원리의 간단한 실현

const handler = {
 get (target, key) {
  if (typeof target[key] === 'object' && target[key] !== null) {
   return new Proxy(target[key], handler)
  }
  return Reflect.get(target, key)
 },
 set (target, key, value) {
  if(key === 'length') return true
  console.log('update')
  return Reflect.set(target, key, value)
 }
}
const obj = {
 arr: [1, 2, 3],
 count: { num: 1 }
}
// obj  ， handler  
const proxy = new Proxy(obj, handler)

vue의 데이터 응답식 원리를 상세하게 설명하는 이 글은 여기까지 소개합니다. 더 많은 vue 데이터 응답식 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!