Vue 로딩 순서 작동 방법

이번에는 Vue 로딩 시퀀스 동작 방법과 Vue 로딩 시퀀스 동작 시 주의 사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

Vuejs 버전 1.0에서는 상위 구성 요소와 하위 구성 요소가 협력하는 경우 해당 수명 주기실행은 다음과 같은 특징을 갖습니다.

1. 창조는 항상 아버지가 먼저 하고 그 다음이 아들이 옵니다

생성되는 라이프사이클 함수는 항상 부모에서 자식 순서로 실행되는데, 형제는 이 순서를 엄격히 따르지 않고, 부모에서 자식 컴포넌트를 삽입하는 순서도 사용하는 것으로 추정된다. 구성 요소도 특정 패턴 없이 무작위로 구성됩니다. 하위 구성 요소가 다음 순서로 참조된다고 가정합니다.

<p class="container">
 <child-c1 v-ref:child1></child-c1>
 <child-c2 v-ref:child2></child-c2>
</p>

모든 하위 구성요소를 가져오기 위해 $children 참조를 사용하는 경우 다음과 같이 "child-c1"이 항상 첫 번째 위치에 있는 것은 아닙니다.

2. 준비 순서가 더 헷갈립니다

내 생각에 따르면 상위 구성 요소와 하위 구성 요소의 준비 순서는 구성 요소가 완전히 로드되도록 하기 위해 먼저 하위 구성 요소 다음으로 상위 구성 요소여야 합니다. 그러나 실제 예를 보면 준비 구성 요소에 순서가 전혀 없는 경우가 있습니다. 하위 구성요소가 먼저 로드되기 때문에

프로그래밍

연습에서는 로드 순서에 의존하면 안 됩니다.

3. 결론

실제로 구성 요소가 순서대로 로드되도록 해야 하는 경우 구성 요소의 수명 순서나 상위 및 하위 구성 요소의 준비된 수명 주기에 의존해서는 안 됩니다.

모든 하위 구성 요소가 로드되는 시점을 판단하는 방법 상위-하위 컴포넌트를 함께 사용하는 경우, 특히 구성 정보가 비즈니스 정보와 분리된 경우 모든 하위 컴포넌트가 로드된 후 상위 컴포넌트의 관련 서비스를 실행해야 하는 경우가 많습니다. 다음 컴포넌트 구조를 예로 들어 보겠습니다.

 // 大多数时候判断会失败
 if(this.$children[0] === this.$refs.child1) {
  // 这里的代码很可能得不到执行机会
 }

위의 예에서는 하위 구성요소의 구성 정보를 결합해야 합니다. 따라서 결합된 구성 정보는 모든 하위 구성요소가 로드되어야 정확하고 완전해질 수 있습니다.

따라서 탑재된 이벤트(1.0의 준비 이벤트)를 직접 사용하면 잘못된 결과가 나올 것입니다. 이 문제를 해결하려면 다음과 같은 데이터 구조와 방법을 만드는 것이 좋습니다.

 <jq-grid :url="url" col-size="5" :sub-grid="true" ref="accountGrid" :on-ready="initGrid" :query="queryParams">
 <jq-col label="账号" name="username" width="75" :sortable="true"></jq-col>
 <jq-col label="用户名称" name="remarkName" width="75" :sortable="true"></jq-col>
 <jq-col label="创建时间" name="createTime" width="90">
 </jq-col>
</jq-grid>

구성 항목 "colSize"를 설정하고 하위 컴포넌트가 호출하는 "addColModel" 메소드를 확인하면 모든 하위 컴포넌트가 로드되는 순간(이때 상위 컴포넌트가 로드될 수도 있고 로드되지 않을 수도 있음)을 판단할 수 있으므로 필요한 구성 정보 정렬 작업을 수행합니다.

그러나 실제 애플리케이션에서는 하위 구성 요소의 수가 많으면 구성 순서와 일치하도록 하위 구성 요소의 로드 순서가 무작위로 발생한다는 것을 발견했습니다. , 다음과 같이 "order”

속성

을 추가할 수 있습니다. 최신 구성 내용은 다음과 같습니다.

props : {
 colSize : {
  type : Number,
  default : 1
 }
}
data () {
 return {
  // 用于获取所有的子组件配置信息
  colModel : [],
  readySize : 0
 }
},
methods : {
 /**
  * 由子组件在加载完成时调用
  */
 addColModel () {
   this.readySize ++
   // 检查进度是否设置的colSize一致
   if(this.readySize == this.colSize) {
   // 这时候所有的子组件已加载完成
   } 
 }
}

이러한 처리 후 로드된 모든 하위 구성 요소를 다음과 같이 정렬할 수 있습니다.

<jq-grid :url="url" col-size="8" :sub-grid="true" ref="hostGrid" :on-ready="initGrid" :query="queryParams">
 <jq-col order="1" label="名称" name="hostName" width="75" :sortable="true" ></jq-col>
 <jq-col order="2" label="主机型号" name="model" width="60" :sortable="true"></jq-col>
 <jq-col order="3" label="生产厂商" name="vendor" width="60" :sortable="true"></jq-col>
</jqgrid>

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 내용을 보려면 다음 페이지의 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트!

추천 도서:

JS 현재 지리적 위치 사례에 대한 자세한 설명 얻기

parabola.js는 포물선을 구현하고 장바구니 기능에 추가

위 내용은 Vue 로딩 순서 작동 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!