Vue3 之子组件异步数据刷新，视图却无响应

引言：Vue3之异步数据刷新视图不响应现象分析

随着 Vue3 的普及，越来越多的开发者使用它进行开发。在使用过程中，难免会遇到各种各样的问题。本文将针对 Vue3 中一个常见的现象进行分析和讲解：子组件接收到异步数据后，视图却未更新。

成因剖析：为何子组件异步数据刷新后视图无响应？

造成此现象的原因有很多，但最常见的原因之一是子组件没有正确使用 props 来传递数据。在 Vue3 中，子组件通过 props 来接收父组件传递的数据。如果子组件没有正确声明 props，或者父组件没有正确传递数据，则子组件就无法接收到异步数据，从而导致视图不更新。

解决方案一：合理运用 props 传递数据，确保子组件能获取数据

为了解决这个问题，开发者首先需要确保子组件已经正确声明了 props。具体来说，需要在子组件的 setup() 方法中使用 defineProps() 函数来声明 props。例如：

import { defineProps } from 'vue';

export default {
  setup() {
    const props = defineProps(['message']);
    return {
      props,
    };
  },
};

其次，开发者需要确保父组件已经正确传递数据给子组件。具体来说，需要在父组件的 template 中使用 v-bind 指令来传递数据。例如：

<template>
  <ChildComponent :message="message" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
};
</script>

解决方案二：巧用 ref 和 emit 实现异步数据更新后触发特定动作

在某些情况下，子组件需要在异步数据更新后执行特定的动作。此时，开发者可以使用 ref 和 emit 来实现。

首先，开发者需要在子组件的 template 中使用 ref 指令来获取子组件的引用。例如：

<template>
  <div ref="child">
    {{ message }}
  </div>
</template>

然后，开发者需要在子组件的 setup() 方法中使用 emit() 函数来触发父组件的方法。例如：

import { defineProps, ref, emit } from 'vue';

export default {
  setup() {
    const props = defineProps(['message']);
    const child = ref(null);

    const updateMessage = () => {
      // 异步更新 message
      setTimeout(() => {
        props.message = 'Hello, Vue!';
      }, 1000);
    };

    const childUpdated = () => {
      // 子组件更新后触发该方法
      emit('child-updated');
    };

    watch(props.message, childUpdated);

    return {
      props,
      child,
      updateMessage,
    };
  },
};

最后，开发者需要在父组件的 template 中使用 v-on 指令来监听子组件触发的事件。例如：

<template>
  <ChildComponent ref="child" @child-updated="onChildUpdated" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    onChildUpdated() {
      // 子组件更新后执行该方法
      console.log('子组件更新了');
    },
  },
};
</script>

通过以上方法，开发者可以轻松解决 Vue3 中子组件异步数据刷新后视图不响应的问题。希望本文能对大家有所帮助。