vue3 父组件传给子组件，值有变化，页面需要重新渲染

在Vue 3中，父组件向子组件传递的值发生变化时，子组件需要重新渲染页面，可以通过以下几种方式实现：

1. **使用`props`和`watch`监听**：
- 父组件通过`props`向子组件传递数据。
- 子组件使用`watch`监听`props`的变化，并在变化时执行相应的逻辑。

<!-- 父组件 -->
<template>
  <ChildComponent :parentData="data" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const data = ref('初始值');
    // 模拟数据变化
    setTimeout(() => {
      data.value = '新的值';
    }, 2000);
    return { data };
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ parentData }}</div>
</template>

<script>
import { watch, onMounted } from 'vue';

export default {
  props: ['parentData'],
  setup(props) {
    watch(() => props.parentData, (newVal, oldVal) => {
      console.log('父组件传递的值变化了:', newVal);
      // 在这里执行重新渲染的逻辑
    });
    onMounted(() => {
      console.log('子组件初始化:', props.parentData);
    });
  },
};
</script>

2. **使用`computed`计算属性**：
- 子组件可以使用`computed`计算属性来响应`props`的变化。

<!-- 子组件 -->
<template>
  <div>{{ computedData }}</div>
</template>

<script>
import { computed } from 'vue';

export default {
  props: ['parentData'],
  setup(props) {
    const computedData = computed(() => {
      return props.parentData;
    });
    return { computedData };
  },
};
</script>

3. **使用`v-model`进行双向绑定**：
- 父组件可以通过`v-model`与子组件进行双向绑定，子组件通过`emit`事件来通知父组件数据变化。

<!-- 父组件 -->
<template>
  <ChildComponent v-model="data" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const data = ref('初始值');
    // 模拟数据变化
    setTimeout(() => {
      data.value = '新的值';
    }, 2000);
    return { data };
  },
};