Vue3 초기화 중에 함수를 호출하는 방법

Vue3 초기화 호출 함수

createApp({}).mount(‘#app')

항목 파일 런타임-dom/src/index.tx

• createApp -> createRenderer -> createBaseRenderer (렌더링 함수 및 일련의 렌더링 함수도 여기에 생성됩니다) -> createAppAPI(실제 createApp 메서드 반환), 인스턴스 앱

• 을 반환한 다음 app.mount("#app") -> createVNode -> render(vnode,rootcontainier,isSVG) -> ; processComponent -> mountComponent(초기 렌더링) 또는 updateComponent ->(createComponentInstance, setupComponent, setupRenderEffect)

• setupComponent의 경우 설정 기능이 있든 없든 사례별로 처리됩니다. 있는 경우 setup 함수에 전달해야 하는 props 및 기타 매개변수를 처리하고 초기화하기 위해 setupComponent->finishComponentSetup을 호출합니다(2.x 버전 옵션 초기화는 여기에서 처리됩니다).

• setupRenderEffect의 경우 일련의 라이프 후크 함수를 실행하여 ReactiveEffect 렌더링을 생성하고 vue2.x의 Watcher와 유사한 ** effect.run()** 메서드

ReactiveEffect

을 실행하여 계산합니다. watch, componentUpdateFn은 렌더링 프로세스 중에 ReactiveEffect도 사용합니다.

const effect = new After ReactiveEffect(fn,...). 단, 계산된 속성은 액세스될 때만 effect.run()을 호출합니다. -> fn( ), fn의 반응 변수에 액세스하고 종속성을 수집하고 나머지 setupRenderEffect, watch, watchEffect는 ReactiveEffect를 생성한 후 effect.run()을 호출하여 종속성을 수집합니다. 여기서

• setupRenderEffect가 액세스합니다. 종속 응답 변수 setupRenderEffect会访问依赖的响应变量

• watch(source,cb,options),会执行访问source的函数,收集依赖

• watchEffect(fn),会自动执行一次fn收集依赖

• effect(fn,options)

watch(source,cb,options )는 함수를 실행하여 소스에 액세스하고 종속성을 수집합니다

watchEffect(fn) , 종속성을 수집하기 위해 자동으로 fn을 한 번 실행합니다

effect(fn, options ). 여기서 options에는lazy:true 옵션이 있습니다. 이는 fn 함수가 종속성을 수집하기 위해 즉시 실행되지 않음을 의미합니다. run 함수가 반환되고 run()이 다시 호출되고 fn 함수가 한 번 실행되고 종속성이 수집됩니다

// 1.计算属性
// computed.ts
// ComputedRefImpl类构造函数调用了new ReactiveEffect
this.effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true
        triggerRefValue(this)
      }
    })
    
// 2. effect
// effect.ts
// effect函数中,可以接收第二个参数effect(fn,{lazy:true}),表示不立即执行
  const _effect = new ReactiveEffect(fn)
// 3. apiWatch.ts doWatch方法
// watch和watchEffect都是通过doWatch函数来,在这里调用new ReactiveEffect,然后根据不同情况执行effect.run(),对于watchEffect就是//执行器回调,对于watch就是访问监听的数据,然后收集依赖
  const effect = new ReactiveEffect(getter, scheduler)
// 4. render.ts
//在 setupRenderEffect中
const effect = (instance.effect = new ReactiveEffect(
      componentUpdateFn,//更新组件函数
      () => queueJob(update),
      instance.scope // track it in component's effect scope
    ))

Vue3 프로그램 초기화 프로세스

Initialization

Vue 3에서는 더 이상 새로운 Vue() 메서드를 사용하지 않습니다. 프로그램 초기화를 위한 Vue2이지만 createApp 메소드를 사용합니다. createApp에서는 어떤 일이 발생하나요?

재작성 이유

createApp은 Vue의 팩토리 함수로, 임포트되어 함수로 호출됩니다. 기능적 스타일의 장점은

1 원래 Vue에 탑재된 정적 메서드를 제거하고 이를 인스턴스 메서드로 전환하여 메모리 사용량을 줄이고 트리 쉐이킹을 용이하게 하며 패키징 볼륨을 줄일 수 있습니다.

기능적 스타일 및 클래스 장식 TypeScript 지원이 매우 좋습니다. 함수 호출 방법은 TypeScript를 더 잘 지원하므로 유형 지원이 향상됩니다. 3. 데이터와 같은 루트 구성 요소의 API는 하위 구성 요소의 API와 동일한 형식을 유지해야 합니다. $ 마운트가 마운트로 변경되어 API가 단순화되고 API의 일관성이 통합됩니다.

4. 새로운 Vue의 마운트 방법은 전역 오염을 일으키며 CreateApp은 서로 독립적일 수 없으며 요청 시 마운트될 수 있습니다.

프로세스 구현

mount

const Vue = {
	createApp(options) {
		//返回app实例
		return {
			mount(selector){
				// 获取渲染函数，编译结果
				// 渲染dom，追加到宿主元素
			}
			compile(template){
			//返回render
				return function render(){
					//描述视图
				}
			}
		}
	}
}

createApp을 호출할 때 옵션에 렌더링이 없으면 구성 요소를 초기화하고 compile을 호출하여 렌더링을 생성하고, 렌더링이 있으면

Vue2에서 직접 마운트합니다. , 를 사용하여 요소 추가 비교 및 ​​교체 방법과 달리 diff 요소 간의 차이점을 비교할 때 비교 및 ​​판단이 이루어집니다. Vue3에서는 요소가 직접 삭제되고 다시 추가됩니다.

반응형 변수는 설정이나 데이터에서 정의할 수 있으며 설정의 우선순위가 더 높습니다.

createApp

Vue, createApp 및 createRenderer에 의해 노출되는 두 가지 초기화 함수, 이들 간의 호출 관계

/*暴露给Vue的createApp*/
function createApp(options){
    const renderer =  Vue.createRenderer({
        /*定义一些平台特有的api，一些实例*/
        aaa(){},
        bbb(){}
    })
    /*用户调用的createApp，实际上是渲染器的createApp*/
    return renderer.createApp()
}
function createRenderer({aaa,bbb}){
    /*获得渲染器*/
    /*这个createApp是函数内部的*/
    return createApp(options){
        /*挂载逻辑*/
        return {
            /*返回App实例*/
        }
    }
}

소스 코드 프로세스

1 사용자가 createApp 메소드 호출 => verifyRenderer를 통해 렌더러 가져오기

2 렌더러는 createRender =》※팩토리 함수인 baseGreateRenderer를 호출합니다. 이 함수는 패치, diff 등을 정의하고 결국 스파 페이지를 렌더링하는 데 사용되는 렌더, ssr 페이지에 물을 주입하는 데 사용되는 수화물 및 function.createApp (Vue의 createApp과 다름)

3. createApp 함수에서는 mount, get, set, use, mixin 등과 같은 프로그램의 인스턴스 메서드가 정의됩니다.

4. 루트 구성 요소가 걸려 있는지 확인합니다(spa/ssr). .처음으로 마운트되면 컴포넌트를 마운트합니다(패치 메소드는 vnode를 노드 노드로 변환합니다)

7. 패치 메소드는 내부 processComponent 메소드를 실행하고 최종적으로 mountComponent 메소드를 실행합니다. Vue2

초기화 프로세스에서 $mount 실행 방법

1. 루트 구성 요소 인스턴스화: createComponentInstance🎜🎜2를 호출합니다. 루트 구성 요소 초기화: Vue2의 this.$_init 메서드를 호출합니다. 옵션을 병합하고 후크 및 응답성을 설정합니다🎜🎜 3. 렌더링 기능의 부작용 기능인 setupRendererEffect🎜를 설치합니다.

Vue3에서는 watcher가 취소되고 부작용 기능으로 대체되었습니다. 반응형 데이터가 변경될 때마다 부작용 기능이 다시 실행됩니다. 변경사항이 있으면 반응형 구성요소가 업데이트됩니다.

PS: React의 useEffect와의 차이점은 useEffect에는 종속성을 수동으로 수집해야 하는 반면 Vue의 effect()는 종속성을 자동으로 수집한다는 것입니다.

위 내용은 Vue3 초기화 중에 함수를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!