vue3[setup]父组件传递子组件数据同步更新四种方法以及性能分析

问题与原因

  • 问题: 本文章解决的问题是当父组件传递给子组件的值发生改变后,子组件不能立刻改变的问题。如下图代码所示,子组件的loading变量没有发生改变。
js 复制代码
//父组件
<template>
<div class="page">
    <loadingVue :process="load"/>
</div>
</template>
<script setup>
import { ref } from "vue";
import loadingVue from "../components/loading.vue";
let load = ref(0);
setInterval(() => {
    if(load.value == 100){
        load.value = 0;
    }else{
        load.value +=10;
    }
}, 1000)
</script>
js 复制代码
//子组件
<template>
    <div class="load_component">
        <div class="petal" v-for="index in sum" :style="`transform: rotate(${-60+index*360/sum}deg)`"></div>
        <div class="flowerCore"></div>
        <div class="loading_text">loading<span>...</span></div>
        <div class="process_text"><div class="span">{{ loading }}</div> % </div>
    </div>
</template>
<script setup name="loading">
import { computed, ref, watch } from "vue";
let sum = ref(6);
let props = defineProps(["process"]);
let loading = ref(props["process"]);
</script>
  • 原因: 原因是接收父组件传递的值赋值在props变量里,而loading变量拷贝了props["process"]的值后,不会再关联props的改变。

解决方法

直接使用props

既然父组件传递的值是由props接收,那么直接使用props变量就好了。

缺点:代码会很杂乱,容易堆史山。

  • 修改后代码:
js 复制代码
//子组件
<template>
    <div class="load_component">
        <div class="petal" v-for="index in sum" :style="`transform: rotate(${-60+index*360/sum}deg)`"></div>
        <div class="flowerCore"></div>
        <div class="loading_text">loading<span>...</span></div>
        <div class="process_text"><div class="span">{{ props["process"] }}</div> % </div>
    </div>
</template>
<script setup name="loading">
import { computed, ref, watch } from "vue";
let sum = ref(6);
let props = defineProps(["process"]);

使用key

给子组件加上keykey的值为父组件传入子组件的值。

缺点:1. 若父传子的值不止一个,那使用哪一个作为key呢?2. 每次改变都会重新渲染整个子组件,容易降低性能。

  • 修改后代码:
js 复制代码
//父组件
<template>
<div class="page">
    <loadingVue :process="load" :key="load"/>
</div>
</template>
<script setup>
import { ref } from "vue";
import loadingVue from "../components/loading.vue";
let load = ref(0);
setInterval(() => {
    if(load.value == 100){
        load.value = 0;
    }else{
        load.value +=10;
    }
}, 1000)
</script>

使用computed

loading变量使用computed属性,同步computed["process"]的变化。

  • 修改后代码:
js 复制代码
//子组件
<template>
    <div class="load_component">
        <div class="petal" v-for="index in sum" :style="`transform: rotate(${-60+index*360/sum}deg)`"></div>
        <div class="flowerCore"></div>
        <div class="loading_text">loading<span>...</span></div>
        <div class="process_text"><div class="span">{{ loading }}</div> % </div>
    </div>
</template>
<script setup name="loading">
import { computed, ref, watch } from "vue";
let sum = ref(6);
let props = defineProps(["process"]);
let loading = computed(()=>{
    return props["process"]
})

使用watch

watch监测props["process"]值的改变。

缺点:watch只是监听,监听后还需要更进一步的操作,不便捷、清晰。

  • 修改后代码:
js 复制代码
//子组件
<template>
    <div class="load_component">
        <div class="petal" v-for="index in sum" :style="`transform: rotate(${-60+index*360/sum}deg)`"></div>
        <div class="flowerCore"></div>
        <div class="loading_text">loading<span>...</span></div>
        <div class="process_text"><div class="span">{{ loading }}</div> % </div>
    </div>
</template>
<script setup name="loading">
import { computed, ref, watch } from "vue";
let sum = ref(6);
let props = defineProps(["process"]);
watch(()=>props["process"],(val,pre)=>{
    loading.value = val;
})

性能分析

  • 推荐: computed > watch > key
  • 理由:
  1. key会导致整个组件重新渲染,降低性能。
  2. computedwatch的代码更简洁清晰。
  3. computed内存有缓存机制(复用),效率更高,调试方便。

可使用watch监测值,在值改变时执行更多操作。


那么文章到这里就结束啦,祝大家好运常来

相关推荐
杨荧7 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
写bug写bug8 小时前
你真的会用枚举吗
java·后端·设计模式
哆啦code梦8 小时前
趣谈设计模式之策略模式-比特咖啡给你一杯满满的情绪价值,让您在数字世界里”畅饮“
设计模式·策略模式
南半球与北海道#9 小时前
前端引入vue-super-flow流程图插件
前端·vue.js·流程图
BillKu10 小时前
vue3+element-plus 输入框el-input设置背景颜色和字体颜色,样式效果等同于不可编辑的效果
前端·javascript·vue.js
每天学习一丢丢10 小时前
Spring Boot + Vue 项目用宝塔面板部署指南
vue.js·spring boot·后端
springfe010110 小时前
vue3组件 - 大文件上传
前端·vue.js
好好好明天会更好11 小时前
uniapp项目中小程序的生命周期
前端·vue.js
萌萌哒草头将军11 小时前
有了它 ,我彻底告别了 try-finally 🔥🔥🔥
前端·javascript·vue.js
anyup12 小时前
🔥🔥 10 天 Star 破百!uView Pro 文档也开源啦:完全免费、无广告、高效上手
前端·vue.js·uni-app