집 > 기사 > 웹 프론트엔드 > Vue의 로딩 순서 예제에 대한 토론

Vue의 로딩 순서 예제에 대한 토론

小云云원래의: 2018-01-22 09:53:081610검색

이 글에서는 주로 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"이 항상 첫 번째 위치에 있는 것은 아닙니다.

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

2. 준비 순서가 변경되었습니다. 혼란

내 추정에 따르면 구성 요소가 완전히 로드되도록 하려면 상위 구성 요소와 하위 구성 요소의 준비 순서가 먼저 하위 구성 요소 다음으로 상위 구성 요소여야 합니다. 그러나 실제 예를 보면 준비에는 없습니다. 때로는 상위 구성 요소가 먼저 로드되기도 합니다. 때로는 하위 구성 요소가 먼저 로드되므로 프로그래밍 실습에서는 해당 로드 순서에 의존해서는 안 됩니다.

3. 결론

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

모든 하위 구성요소가 로드되었는지 판단하는 방법

상위-하위 구성요소를 함께 사용할 때, 특히 구성 정보와 비즈니스 정보가 분리된 경우 모든 하위 구성요소가 로드된 후 상위 구성요소를 실행해야 하는 경우가 많습니다. 서비스의 경우 다음 구성 요소 구조를 예로 들어 보겠습니다.

 <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>

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

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

props : {
 colSize : {
  type : Number,
  default : 1
 }
}

data () {
 return {
  // 用于获取所有的子组件配置信息
  colModel : [],
  readySize : 0
 }
},

methods : {
 /**
  * 由子组件在加载完成时调用
  */
 addColModel () {
   this.readySize ++
   // 检查进度是否设置的colSize一致
   if(this.readySize == this.colSize) {
   // 这时候所有的子组件已加载完成
   } 
 }
}

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

그러나 실제 애플리케이션에서는 하위 구성 요소의 수가 많으면 로드 순서가 구성과 일치하는지 확인하려는 경우 또 다른 현상이 발생한다는 것을 발견했습니다. order, 다음과 같이 "order" 속성을 추가할 수 있습니다. 최신 구성 내용은 다음과 같습니다.

<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>

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

// 由于Vue无法确定子元素的加载顺序，必须手动指定order
this.colModel.sort((a, b) => a.order - b.order)

Conclusion

By 수동으로 보조 변수와 메서드를 추가하면 하위 구성 요소가 로드되어 통합 작업을 수행하는 순간을 얻을 수 있습니다.

Vue의 로딩 순서 예제에 대한 토론

관련 기사