vue组件的重新渲染的问题

目录

1.方式1

2.方式2


1.方式1

修改组件上的key属性

Vue是通过diffing算法比较虚拟DOM和真实DOM,来判断新旧 DOM 的变化。key是虚拟DOM对象的标识,在更新显示时key表示着DOM的唯一性。

DOM是否变化的核心是通过判断新旧DOM的key值是否变化,如果key发生改变,则重新渲染该DOM,如果key没变,则不会重新DOM。

如果想让组件重新渲染,只需要给组件加上key属性,然后在需要重新渲染的时候,将组件绑定的key值更改就可以。

复制代码
    <div class="item" v-for="(item, index) in list" :key="item.id">
      <child :id="item" :key="key"></child>
    </div>

比如常见的v-for指令会经常使用到key属性,key属性内容一般使用id,因为id是唯一的。当list的内容发生变化时,vue会进行比较,key值没有变化的则不会渲染,只有key值变换的才会进行局部的渲染,这样避免了list发生了变化,整个列表都要重新渲染的问题,所有通过key属性的使用提高了性能。

所以说,如果想重新渲染组件时,只需要改变key属性即可。

例如对话框中的上传组件,每次打开需要重新渲染,避免保留上次上传的文件信息。

复制代码
<template>
  <a-modal :visible="visiable" :title="title" @ok="handleOk" @cancel="handleCancel" :ok-loading="okLoad" >
    <a-upload draggable accept=".xlsx" :custom-request="customRequest" :limit='1' :key="KeyInfo"/>
  </a-modal>
</template>
<script lang="ts" setup>
import {importInfo, dowload} from '@/api/upload';
import {Message} from '@arco-design/web-vue';
import moment from "moment"
import {ref} from 'vue'


const prop = defineProps({
  title: String,
  params: String,
})
const visiable = ref(false);

const okLoad = ref(false)

const KeyInfo = ref(Math.random());

let fileInfo:any = {}
// 自定义上传事件
const customRequest = (option: any) => {
  const {onProgress, onError, onSuccess, fileItem, name} = option
  fileInfo = fileItem;
  onSuccess()
  console.log("上传文件信息:" + JSON.stringify(fileInfo))
}

const emit = defineEmits(['handleQuery'])

const open = () => {
  visiable.value = true
    KeyInfo.value = Math.random()
}
// 导出方法在父组件中进行使用
defineExpose({open});

// 关闭弹框
const handleCancel = () => {
  visiable.value = false
  KeyInfo.value = Math.random()
}
// 确定事件
const handleOk = async () => {
  okLoad.value = true;
  // 上传文件不能为空
  if(!fileInfo.name){
    Message.error({content:'上传的文件不能为空',position:'top'})
    okLoad.value = false;
    return
  }
  try {
    let formData = new FormData()
    formData.set('file', fileInfo.file)
    formData.set('data', prop.params ? prop.params : '')
    const res = await importInfo(formData)
    if (res == '1') {
      Message.success({content: '操作成功', position: 'top'});
    } else {
      Message.error({content: '导入的文件中存在重复,重复的地点信息请参照下载的文件', position: 'top'});
      await dowload('/em/file/mb1002', '', `地点信息_${moment().format('yyyyMMDDHHmmss')}.xlsx`, {})
    }
    visiable.value = false
    emit('handleQuery')
    fileInfo = {}
    KeyInfo.value = Math.random()
  } catch (e) {
    console.log(e)
  } finally {
    okLoad.value = false;
  }
}
</script>

在upload组件中追加了key属性, 组件第一次加载时,key的内容为随机数,打开时设置为随机数。这样每次打开时,key变化了,所以upload组件会重新渲染。

2.方式2

使用v-if指令

当DOM设置为false的时候,当前条件块中的DOM会被销毁。如果条件块包含的是组件,则组件对应的生命周期函数(beforeDestroy、destroyed等)会执行。

当DOM设置为true的时候,当前条件块中的DOM会被重建。如果条件块包含的是组件,则组件对应的生命周期函数(created、mounted等),计算属性,watch等都会执行,相当于重新渲染。

参照:

Vue - 组件重新渲染的两种方式_vue重新渲染dom-CSDN博客

Vue 中 强制组件重新渲染的正确方法_forceupdate-CSDN博客

相关推荐
某公司摸鱼前端3 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~4 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程10 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏11 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron