Vue3 代码优化技巧:提升性能和可读性
以下是针对代码的优化建议:
-
将 'v-show' 属性改为 'v-if' 属性,这样可以避免不必要的 DOM 渲染。
-
将 style 样式移动到 CSS 文件中,避免在 HTML 中直接添加样式。
-
将 div 标签改为 template 标签,避免在渲染时产生多余的 div 元素。
-
将 'v-loading' 属性改为 'v-wait' 属性,这是 Vue3 中的新指令。
改进后的代码如下:
<template>
<strong class="ff-ab">
<template v-if="resdata.status">
<div v-wait style="margin-top: -30px"></div>
</template>
<template v-else>
{{ resdata.shijian }}
</template>
</strong>
</template>
<script>
export default {
props: {
resdata: Object,
},
};
</script>
<style scoped>
.ff-ab {
/* 添加样式 */
}
</style>
原文地址: https://www.cveoy.top/t/topic/lB9R 著作权归作者所有。请勿转载和采集!