FrameWorks/Vue30

• 

  Vue의 watchEffect 와 watch 파헤치기 watchEffect(${function}, {${options}} )컴포넌트 렌더링 직전에 실행된다.종속성을 반응형으로 추적하면서 함수를 즉시 실행하고 종속성이 변경될 때마다 함수를 다시 실행하는 함수기본 옵션값의 flush는 ‘pre’로 설정되어 있다.드물지만 캐시 무효화 등 반응형 의존성이 변경될 때 즉시 와처를 트리거해야 하는 경우flush를 ‘sync’로 사용하여 수행할 수 있다. → 그러나, 여러 property가 동시에 업데이트 되는경우 성능 및 데이터에 문제를 야기할 수 있다.Type function watchEffect( effect: (onCleanup: OnCleanup) => void, options?: WatchEffectOptions ): StopHandle t.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 ModelValue 파헤치기 :modelValuev-model은 양방향 바인딩 컴포넌트다.vue3는 내부적으로 양방향 바인딩을 단방향 바인딩으로 캐스팅하여 Props를 수정 할 수 있게 했다.props는 기본적으로 readOnly reactive object이다.위의 소스코드는 컴파일러에 의해 아래와 같이 변한된다.해당 기능을 컴포넌트에 적용 시키면 다음과 같이 변경된다. first = newValue"/>코드 부모 Component 자식 Component 참고 Reference Component v-model | Vue.js FrameWorks/Vue 2024. 6. 12.

• 

  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.