필기 vue3 관찰자 모드 미니 버전
const weakMap = new WeakMap
const effectStack = []
let activeEffect
function pushStack(o) { effectStack.push(o); activeEffect = o }
function popStack() { effectStack.pop(); activeEffect = effectStack[effectStack.length - 1] }
function trigger(obj, k) {
let k2depMap = weakMap.get(obj)
if (!k2depMap) return
const dep = k2depMap[k]
if (!dep) return
dep.forEach(e => e())
}
function track(obj, k) {
if (!activeEffect) return
let k2depMap = weakMap.get(obj)
if (!k2depMap) weakMap.set(obj, k2depMap = {})
let dep = k2depMap[k]
if (!dep) dep = k2depMap[k] = new Set
dep.add(activeEffect)
}
function effect(fn, option = {}) {
const effect = function() {
try {
pushStack(fn)
return fn()
} finally {
popStack()
}
}
if (!option.lazy) effect()
return effect
}
function reactive(state) {
return new Proxy(state, {
set(target, k, v) {
target[k] = v
trigger(target, k, v)
},
get(target, k) {
track(target, k)
return target[k]
}
})
}
const state = reactive({ count: 1, circle: true })
effect(() => {
const div = document.getElementById('btn')
div.innerText = ' _ ' + state.count
})
effect(() => {
const div = document.getElementById('circle')
const style = {
borderRadius: state.circle ? '20px' : 0
}
Object.assign(div.style, style)
})
function btn_click() {
state.count++
}
function circle_click() {
state.circle = !state.circle
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
