8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

在 Vue2 中使用 keep-alive 的惰性加载组件仅渲染一次

JNellis 2月前

73 0

我使用 keep-alive 来缓存 Vue.js 应用程序中的一些页面,其中大多数页面运行良好。但是,对于一些使用延迟加载组件的页面,当我刷新时,页面会正常呈现...

我在 Vue.js 应用程序中使用 keep-alive 来缓存一些页面,其中大多数页面运行良好。但是,对于使用延迟加载组件的少数页面,当我刷新页面或首次打开时,页面会正常呈现。但当我切换到其他页面然后返回时,页面会变为空白。

该问题仅发生在第一个打开的页面上,而以相同方式导入的其他页面只要不是第一个打开的页面,都可以正常运行。

路由器视图.vue

      <div>
       <transition :name="transitionName">
          <keep-alive :max="maxPageCache" :include="keepAlive">
             <router-view :key="routerViewKey" />
          </keep-alive>
       </transition>
      <div>

...
let keepAlive = ['a','b']
...

页面预览

      <template>
           <list-template v-if="xxx"/>
           <something v-else />
      </template>
      import listTemplate from './list-template.vue'
      ...
      name:'a',
      components:{
       'list-template': listTemplate,
       'something': ()=>import('./something.vue')
      }
      ...

列表-模板.vue

      <template>
           <list />
      </template>
      ...

组件.js

...
Vue.component('List',()=>import('./list'))
...

我检查过:

  • componentInstance 被 keep-alive 缓存了,但是 this.$vnode.componentInstance.$el.--vue-- 为 null
  • 激活和停用的钩子工作正常
  • 键和名称是正确的
  • vue.js devtools:我可以看到延迟加载的组件道具和状态,但激活时没有渲染时间
  • 没有错误

我发现,如果我删除路由视图的“key”,或者不使用延迟加载组件,或者用 div 包裹延迟加载组件,或者在延迟加载组件之前插入一些内容,那么所有页面都可以正常工作,问题就解决了。

但我不知道为什么会出现这个问题,以及为什么可以用这些方法解决。

帖子版权声明 1、本帖标题:在 Vue2 中使用 keep-alive 的惰性加载组件仅渲染一次
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由JNellis在本站《vue.js》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 我有一个运行良好的 vue 项目。Npm run watch 运行正常。经过一些更改后,npm run watch 开始停滞,没有错误或警告,如图所示。我删除了节点模块和

    我有一个运行良好的 vue 项目。Npm run watch 运行正常。经过一些更改后,npm run watch 开始停滞,没有错误或警告,如图所示。

    我删除了节点模块并再次安装了 npm,但没有用。我还删除了节点缓存,但仍然没有进展。

  • 我正在尝试找出在 Nuxt 服务器上处理流数据的最佳方法。在前端,我正在读取文件,将其拆分成块,然后将其发送到后端。但是,我并不......

    我正在尝试找出在 Nuxt 服务器上处理流数据的最佳方法。

    在前端,我正在读取文件,将其分成几块,然后将其发送到后端。但是,我不确定如何在服务器端处理流数据。有人有什么想法吗?

    <template>
      <div>
        <input
          type="file"
          @input="onUpload"
        />
      </div>
    </template>
    
    <script setup lang="ts">
    const onUpload = ({files: File[]}): void => {
      const uploadFile = files.at(0);
      console.log('upload file', uploadFile);
    
      if (!uploadFile) return;
    
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(uploadFile);
    
      fileReader.onload = async (event) => {
        if (!event?.target?.result) return;
        // file content
        const content = event.target.result;
        // fix chunk size
        const CHUNK_SIZE = 5000;
        // total chunks
        const totalChunks = event.target.result.byteLength / CHUNK_SIZE;
    
        // loop over each chunk
        for (let chunk = 0; chunk < totalChunks + 1; chunk++) {
          // prepare the chunk
          let CHUNK = content.slice(
            chunk * CHUNK_SIZE,
            (chunk + 1) * CHUNK_SIZE
          ) as 
    
          await $fetch('/api/upload', {
            method: 'post',
            headers: {
              contentType: 'application/octet-stream',
              contentLength: CHUNK.byteLength.toString(),
            },
            body: CHUNK,
          });
        }
        console.log('Complete File read successfully!');
      };
    };
    </script>
    
  • 我有一个如下所示的表单字段数组,我想使用事件和函数呈现动态表单[...{标签:\'Logo\',字段:\'image\',组件...

    我有一个如下所示的表单字段数组,我想使用事件和函数呈现动态表单

    [...{
                label: "Logo",
                field: "image",
                component: SingleImg,
                event:"select",
                handleEvent:(event) => {
                    console.log("hello")
                },
                attributes: {
                  upload:false,
                  type: "file",
                  accept: "image/*",
                  maxFileSize: 10000000,
                  showUploadButton: false,
                  showCancelButton: false,
                  
                },
              },]
    
    

    以下是我的渲染方式:

    <component
                  :is="row.component"
                  v-bind="row.attributes"
                  v-model="formData[row.field]"
                  :key="row.field"
                  @[row.event]="row.handleEvent"
                ></component>
    

    如何正确将事件及其对应的函数绑定到 Vue 3 中的动态组件?

    有人能告诉我如何在 Vue 模板中呈现事件并正常运行吗

  • 我的 aggrid 从 pinia 商店获取数据,bras 是客户分支的数组const { selectedCustomer } = storeToRefs(customerStore)const rowData =selectedCustomer.value.braswh...

    我的 aggrid 从 pinia 商店获取数据,bras 是客户分支机构的数组

    const {  selectedCustomer } = storeToRefs(customerStore)
    const rowData =selectedCustomer.value.bras
    

    当我修改另一个组件中分支的数据(该组件也从此存储中提取数据)时,网格不会更新,整个事情都出现了故障。有人遇到过这种情况吗?

  • 您需要改变存储本身的状态,而不仅仅是“从”存储中“提取”的变量。如果看不到您的代码,就不可能准确地告诉您哪里出了问题。请修改您的问题以包含所有相关代码。顺便说一句,“bras”是“branches”的缩写,非常糟糕。以下是用于改变存储状态的 Pinia 文档。

  • 按照以下示例更改您的配置:

     on: {
                keyDown: (event) => {
                console.log("hello")
            }
        },
    

    并在组件中使用 v-on:

     <component
              :is="row.component"
              v-bind="row.attributes"
              v-model="formData[row.field]"
              :key="row.field"
              v-on="row.on"
            ></component>
    
返回
作者最近主题: