Vue.js에서 watch를 사용하는 방법에 대한 자세한 설명

이 글은 주로 Vue.js에서 $watch를 사용하는 방법을 소개합니다. 편집자는 꽤 좋다고 생각하여 공유하고 참고하겠습니다. 편집자를 따라가서 살펴보겠습니다

지난 이틀 동안 Vue.js에서 $watch에 대해 많은 것을 배웠고 매우 중요하므로 오늘은 몇 가지 메모를 추가하겠습니다.

git허브 소스코드

Observer, Watcher, vm은 Vue에서 더 중요한 부분이라고 할 수 있습니다 . 데이터 변경 감지 후 보기는 업데이트의 중요한 부분입니다. 간단한 $watch 함수를 구현하는 방법을 살펴보겠습니다. 물론 Vue는 이 기사에서 하나씩 설명하지 않을 많은 최적화 방법을 사용합니다.

예:

// 创建 vm
let vm = new Vue({
 data: 'a'
})

// 键路径
vm.$watch('a.b.c', function () {
 // 做点什么
})

먼저 이 데모와 Vue에서 관계를 명확히 합니다.

vm이 $watch를 호출한 후 먼저 관찰 함수 Create를 호출합니다. 데이터를 관찰하기 위한 Observer 인스턴스와 Observer는 구독자를 유지하는 데 사용되는 Dep를 생성합니다. 그런 다음 Watcher 인스턴스를 생성하여 update 기능을 제공합니다. 데이터가 변경되면 콜백 함수 가 레이어별로 실행됩니다.

관찰하고 관찰

재귀적으로관찰 함수를 호출하여 관찰자를 만듭니다. Observer를 생성하는 과정에서 Object.defineProperty() 함수를 사용하여 get set 함수를 추가하고 Dep 인스턴스를 생성합니다.

export function observe (val) {
 if (!val || typeof val !== 'object') {
  return
 }
 return new Observer(val)
}

도대체 Dep.target이 무엇인지 궁금하시죠?

위 내용은 Vue.js에서 watch를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!