Vue 관찰 모드에 대한 간단한 이해

이 글은 Vue 관찰 모드에 대한 간단한 이해를 제공하며, 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

다음은 Vue 관찰자 패턴에 대한 나의 이해입니다.

프레임워크에 대해 편견을 가지지 마십시오. Jquery, Angle, React 등을 잘 이해하고 계실 것입니다. 프레임워크는 단지 도구일 뿐입니다.
jquery의 트리거, 켜기, 끄기 이벤트 바인딩 방법을 사용해 본 적이 있나요? 실제로 vue가 자동으로 on 메소드를 호출하고 자동으로 트리거를 트리거한다는 점을 제외하면 vue도 이 모드에 있습니다. jquery 없이 이벤트 수신 및 트리거링을 구현할 수도 있습니다. 사실 마지막 설명은 특정 이벤트의 콜백(기본 원리)입니다.
다음은 소스 코드 디렉터리의 스크린샷입니다.

1... vue 인스턴스가 초기화되면 데이터 함수에서 반환된 개체의 속성에 대해 다음 메서드가 호출됩니다. 코드 설명은 다음과 같습니다.

 // 这个是 vue 绑定自动绑定事件的方法和触发事件方法, 会把data函数返回的对象变量属性，重写对应属性的 赋值 和获取的操作。具体查看 （mdn  Object.defineProperty api）
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // watcher 对象， 如果存在
      if (Dep.target) {
        // 把Watcher 实例 推入 Dep 实例的 subs 数组里， 这个就相当于 on
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      // 通知 Dep 实例 中subs 里数组 中所有 Watcher 实例, 然后调用Watcher实例里的 update方法(), 这个就相当于 trigger。
      dep.notify()
    }
  })

// Watcher 构造函数 
 constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  )

2...Watcher 초기화 중에 Dep.pushTarget 메서드가 호출되고 Wathcer 인스턴스가 dep.js의 Dep.target에 할당된 다음 exporFn이 나타내는 메서드는 다음과 같습니다. exporFn을 기반으로 실행됩니다. 이 메서드에는 기본적으로 1에서 getter 메서드를 호출하는 것이 포함됩니다... (기본적으로 vue 인스턴스 속성 데이터 값을 가져오거나 vue 인스턴스의 계산된 속성 값을 가져오는 것을 포함하는 렌더 후크의 작업을 생각해 보세요) .

var vm = new Vue({
    data () {
        return {msg: '找个小姐姐！'}
    },
    // 相当于 exporFn
    render(h) {
        return h('h3', {},
          // 这里面就会调用 msg 对应的 getter方法
          this.msg
        )
    }
})

그래서 렌더링 함수는 Vue 인스턴스의 데이터 속성 및 관찰 속성과 연결되어 닫힌 루프를 형성합니다. 속성이 변경되면 setter 메서드가 자동으로 호출되어 dep.notify 메서드가 트리거되고, 그러면 dep.subs의 Watcher 인스턴스가 업데이트 메서드를 호출한 다음 업데이트됩니다.

(코드 중 이 부분을 어떻게 말해야 할지 몰라서 작성하지 않았습니다. 자세한 내용은 소스코드를 확인해주세요)

위 내용은 Vue 관찰 모드에 대한 간단한 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!