中企动力网站建设 长春,电影网站开发视频,做网站开发实习生怎么样,网站 备案 注销目录 1.方式1
2.方式2 1.方式1
修改组件上的key属性
Vue是通过diffing算法比较虚拟DOM和真实DOM#xff0c;来判断新旧 DOM 的变化。key是虚拟DOM对象的标识#xff0c;在更新显示时key表示着DOM的唯一性。 DOM是否变化的核心是通过判断新旧DOM的key值是否变化#xff0c…目录 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 classitem v-for(item, index) in list :keyitem.idchild :iditem :keykey/child/div
比如常见的v-for指令会经常使用到key属性key属性内容一般使用id因为id是唯一的。当list的内容发生变化时vue会进行比较key值没有变化的则不会渲染只有key值变换的才会进行局部的渲染这样避免了list发生了变化整个列表都要重新渲染的问题所有通过key属性的使用提高了性能。
所以说如果想重新渲染组件时只需要改变key属性即可。
例如对话框中的上传组件每次打开需要重新渲染避免保留上次上传的文件信息。
templatea-modal :visiblevisiable :titletitle okhandleOk cancelhandleCancel :ok-loadingokLoad a-upload draggable accept.xlsx :custom-requestcustomRequest :limit1 :keyKeyInfo//a-modal
/template
script langts setup
import {importInfo, dowload} from /api/upload;
import {Message} from arco-design/web-vue;
import moment from moment
import {ref} from vueconst 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} optionfileInfo fileItem;onSuccess()console.log(上传文件信息 JSON.stringify(fileInfo))
}const emit defineEmits([handleQuery])const open () {visiable.value trueKeyInfo.value Math.random()
}
// 导出方法在父组件中进行使用
defineExpose({open});// 关闭弹框
const handleCancel () {visiable.value falseKeyInfo.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 falseemit(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博客
