Vue28

• 

  Vue의 nextTick() 파헤치기 nextTick( )export function nextTick( this: T, fn?: (this: T) => void): Promise { const p = currentFlushPromise || resolvedPromise return fn ? p.then(this ? fn.bind(this) : fn) : p;}nextTick( )다음 DOM 업데이트 주기가 끝난 후 실행할 지연된 콜백데이터를 수정한 직후에 이 방법을 사용하여 업데이트 된 DOM을 가져온다.const message = ref('Hello!')const changeMessage = async newMessage => { message.value = newMessage // 여기서 DOM에서 얻은 값은 이전 값입니다. .. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 BaseHandler 파헤치기 BaseHandlersHandler는 reactive 내에서 생성되는 Proxy의 핸들러 인수(객체; instanace)를 의미즉, 각 (객체; instance) 메서드는 Proxy Trap 이다.해당 모듈에서 가장 중요한 함수는 createGetter, createSetter 두 함수이다.사전에 필요한 기술적 지식Vue3는 중첩된 객체에도 반응성을 제공한다.But!! Proxy를 사용하기 때문에, 대상 객체 내부에 외부 객체가 존재할 경우, 동등 비교 시 문제가 발생한다.const obj = {};const arr = reactive([obj]);const reactiveObj = arr[0];obj !== reactiveObjVue3는 내부적으로 Proxy와의 동등비교를 기존 객체와의 비교로 변경한다.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 ref 파헤치기 ref( )단일 값을 갖을 수 있다.안타깝게도 Proxy는 객체에 대해서만 동작하므로 단일 값을 객체에 집어 넣어야 한다.통상적인 Vue의 ref( )의 구현은 reactive( )를 활용하지 않고, 객체 접근자를 통해 구현되어 있다.reactive( )를 활용한 구현function ref(initialValue){ return reactive({value : initalValue});}객체 접근자를 활용한 구현JavaScript Object 접근자JavaScript Object Accessors는 JavaScript computed 속성이라고도 한다.주의!! Vue computed 속성과 혼동하지 말것!!(나의 생각) Java에서 객체를 생성하는 방식으로 getter, setter와 유사하며, jso.. FrameWorks/Vue 2024. 6. 12.

• 

  reactive( ) Vue reactive functionconst targetMap = new WeakMap() // targetMap stores the effects that each object should re-run when it's updated let activeEffect = null // The active effect running function track(target, key) { if (activeEffect) { // { // run them all effect() }) } } function reactive(target) { const handler = { get(target, key, receiver) { let result = Reflect.get(target, key, receiver) t.. FrameWorks/Vue 2023. 7. 11.