vue2 vue3은 단일 파일 구성 요소를 독립적인 js 파일로 패키징하고, 구성 요소를 동적으로 로드하고, 구성 요소를 비동기적으로 로드합니다.

1. 나 혼자 속았다(요구)

내가 원하는 것은 "컴포넌트의 비동기 로딩"인데, 이전 경험에 따르면 검색 키워드는 "컴포넌트의 동적 로딩"입니다.

"동적 로딩 구성 요소"는 vue에서 또 다른 의미를 갖습니다.

게다가 "단일 파일 구성 요소를 독립 js로 패키징"이라는 키워드로 검색한 내용도 제가 원하는 내용이 아닙니다.

내 요구 사항은 단일 파일 구성 요소를 독립적인 js 파일로 패키징한 다음 모든 것을 로드하는 대신 페이지에 필요할 때 로드하는 것입니다.

(2)해결책

공식 문서 "Asynchronous Components" 관련 기사를 직접 확인하세요.

(3)간단한 예

요령은 매우 간단합니다. 저는 며칠 동안 작업했고 심지어 마스터에게 이 문제를 처리하는 데 도움을 달라고 요청했습니다. (내 설명에 뭔가 문제가 있었던 것 같습니다. 그는 제가 의미하는 바를 실제로 이해하지 못했고, 해결하지 마세요)

cesi.vue 간단한 모듈

<template>
<div>
  测试模块
</div>
</template>

<script>
export default {
  name: "cesi",
  data(){
    return{
    }
  },
  methods: {
  }
}
</script>

<style scoped>

</style>

동적 참조가 필요한 기타 장소

<template>
  <div class='LeftAd'>
    <div @click="add">点击</div>
<!--    <img src="/static/img/LeftAd.png"/>-->
    <component v-bind:is="name"></component>
  </div>
</template>

<script>
import Vue from 'vue'
Vue.component('cesi', function (resolve) {
// 这个特殊的 `require` 语法将会告诉 webpack
// 自动将你的构建代码切割成多个包，这些包
// 会通过 Ajax 请求加载
  require(['./cesi'], resolve)
})

export default {
  name: "LeftAd",
  data(){
    return{
      name:''
    }
  },
  methods: {
    add(){
       this.name ='cesi'
    }
  }
}
</script>

<style>
</style>

키 코드:

(1)<comComponent v-bind:is="name"></comComponent> 이는 이름에 따라 다양한 구성요소를 동적으로 로드하는 것입니다.

(2)Vue.comComponent('cesi', 함수(해결) {require(['./cesi'], 해결)})

이 코드 줄은 이 구성 요소가 적절한 시간에 ajax 형식으로 로드된다는 것을 나타냅니다.

npm run build를 실행하면 cesi.vue가 별도의 js 파일로 패키징됩니다.

div를 클릭한 후 this.name ='cesi'가 실행되고 cesi.vue가 실제로 사용되는 경우에만 Vue가 자동으로 서버에 js 파일을 요청하여 컴포넌트를 로드하므로 어떻게 로드할지 걱정할 필요가 없습니다.