애플릿은 watch 및 계산을 통해 데이터를 어떻게 감지합니까?

Vue에서 Computed는 뷰에 바인딩된 데이터를 처리하고 변경 사항을 수신하는 필터와 유사한 계산된 속성입니다. Watch는 복잡한 데이터 유형을 모니터링하기 위해 심층 모니터링을 사용해야 합니다. 이 두 가지 모두 vue의 데이터 변경을 감지할 수 있습니다. Vue와 달리 WeChat 애플릿은 watch 및 계산을 사용하여 해당 변경을 수행할 수 있습니다. 애플릿의 this.setData() 함수만이 데이터를 감지할 수 있으므로 애플릿의 데이터 변경을 감지해야 할 때마다 이 함수를 수동으로 실행해야 합니다. 또한 애플릿은 이 두 가지 기능을 연결하여 데이터 변경 사항을 감지할 수도 있습니다.

Vue는 Object.defineProperty를 통해 데이터 변경 감지를 구현합니다. 모든 바인딩 작업을 변수 setter에 삽입하면 변수가 변경될 때 다른 데이터도 변경될 수 있습니다. 실제로 작은 프로그램의 구현은 vue보다 간단합니다. 왜냐하면 데이터의 객체에 대해 vue는 객체의 각 변수를 재귀적으로 바인딩하여 반응하도록 해야 하기 때문입니다. 하지만 WeChat 애플릿에서는 객체이든 기본 유형이든 this.setData()를 통해서만 변경할 수 있습니다. 이렇게 하면 키 대신 데이터의 키 값 변경만 감지하면 됩니다. 키 값.

테스트 코드:

Page({
data: {
test: { a: 123 },
test1: \'test1\',
},
onLoad() {
computed(this, {
test2: function() {
returnthis.data.test.a + \'2222222\'
},
test3: function() {
returnthis.data.test.a + \'3333333\'
}
})
watch(this, {
test:function(newVal) {
console.log(\'invoke watch\')
this.setData({test1: newVal.a + \'11111111\' })
}
})
},
changeTest() {
this.setData({ test:{ a: Math.random().toFixed(5) } })
},
})

이제 테스트가 변경되면 test1, test2, test3도 변경되도록 watch 및 계산 메서드를 구현해야 합니다. 이러한 이유로 이 버튼을 클릭하면 테스트가 수행됩니다. 변화.

watch 메서드는 비교적 간단합니다. 먼저 변경 사항을 감지하는 함수를 정의합니다.

function defineReactive(data, key, val, fn) {
Object.defineProperty(data, key, {
configurable: true,
enumerable: true,
get: function() {
return val
},
set: function(newVal){
if (newVal === val)return
fn &&fn(newVal)
val = newVal
},
})
}

그런 다음 watch 함수에 의해 전달된 객체를 반복하고 각 키에 대해 메서드를 호출합니다.

function watch(ctx, obj) {
Object.keys(obj).forEach(key => {
defineReactive(ctx.data, key, ctx.data[key], function(value) {
obj[key].call(ctx,value)
})
})
}

여기서 매개변수는 fn입니다. 위의 watch 메서드에 있습니다. test 값은 여기서 메서드를 레이어와 바인드 컨텍스트로 래핑합니다.

계산된 항목을 살펴보겠습니다. 데이터의 어떤 변수가 계산된 항목에 종속되는지 알 수 없으므로 데이터의 각 변수만 순회할 수 있기 때문에 조금 더 복잡합니다.

function computed(ctx, obj) {
let keys =Object.keys(obj)
let dataKeys =Object.keys(ctx.data)
dataKeys.forEach(dataKey => {
defineReactive(ctx.data, dataKey, ctx.data[dataKey])
})
let firstComputedObj =keys.reduce((prev, next) => {
ctx.data.$target =function() {
ctx.setData({[next]: obj[next].call(ctx) })
}
prev[next] =obj[next].call(ctx)
ctx.data.$target =null return prev
}, {})
ctx.setData(firstComputedObj)
}

이 코드를 자세히 설명하세요. 먼저 데이터의 각 속성에 대해 DefineReactive 메서드를 호출하세요. 그런 다음 계산에서 각 속성의 첫 번째 값(위 예에서는 test2 및 test3)을 계산합니다.

computed(this, {
test2: function() {
returnthis.data.test.a + \'2222222\'
},
test3: function() {
returnthis.data.test.a + \'3333333\'
}
})

여기서 test2와 test3의 값을 각각 호출하고 반환 값과 해당 키 값을 객체로 결합한 다음 setData()를 호출하면 이 두 값이 여기서는 처음으로 축소 방법을 사용했습니다. test2와 test3은 모두 테스트에 의존하므로 테스트가 변경되면 test2와 test3의 해당 함수를 해당 setter 함수에서 호출해야 하며 이 두 변수는 setData를 통해 설정됩니다.

미니 프로그램 스토어더 많은 온라인 미니 프로그램 제공

변경 시 실행해야 하는 모든 기능을 저장할 변수를 선언하고, this.data.test의 값이 아직 설정되지 않았기 때문에 설정 시 각 기능을 실행합니다. 이때 결정된 내용을 변경하려면 setTimeout을 사용하여 다음 라운드에서 다시 실행하면 됩니다. 이제 서브에 기능을 추가하는 방법에 대한 질문이 있습니다. 위에서 언급한 Reduce의 두 줄의 코드를 아직도 기억하고 있는지 모르겠습니다. 왜냐하면 test1과 test2의 계산값을 처음으로 계산할 때 test의 getter 메소드가 호출되기 때문입니다. 이는 subs에 함수를 주입하고 data에 $target 변수를 선언하고 할당할 수 있는 좋은 기회입니다. 실행해야 하는 함수입니다. getter의 데이터에 대상 값이 있는지 판단할 수 있도록 이 변수를 제공하므로 즉시 대상을 null로 설정해야 합니다.

지금까지 watch와 Computed를 구현했지만, 아직 끝나지 않았는데, 궁금한 점이 있습니다. 두 가지를 동시에 사용하는 경우 watch에 있는 개체의 키가 데이터에도 존재하므로 해당 변수에 대해 Object.defineProperty가 반복적으로 호출되고 나중에 이전 개체를 덮어쓰게 됩니다. 둘을 호출하는 순서를 정할 수 있는 vue와는 아니기 때문에 계산된 값을 먼저 관찰할 수 있도록 계산을 먼저 작성한 후 감시하는 것을 권장합니다.

추천: "Mini 프로그램 개발 튜토리얼"

위 내용은 애플릿은 watch 및 계산을 통해 데이터를 어떻게 감지합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!