8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. vue.js
  3. 在 Vue2 中使用 keep-alive 的惰性加载组件仅渲染一次

在 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） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    我有一个运行良好的 vue 项目。Npm run watch 运行正常。经过一些更改后，npm run watch 开始停滞，没有错误或警告，如图所示。我删除了节点模块和

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

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

  • 引用 3楼

    我正在尝试找出在 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>
  • 引用 4楼

    我有一个如下所示的表单字段数组，我想使用事件和函数呈现动态表单[...{标签：\'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 模板中呈现事件并正常运行吗

  • 引用 5楼

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

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

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

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

  • 引用 6楼

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

  • 引用 7楼

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

     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>
返回
作者最近主题：