vue父向子传静态数据，子组件立即渲染需要用watch监听

笔者在用vue开发过程中发现用prop实现父组件向子组件传递数据时，子组件不会立即渲染，发现是如下原因：

在 Vue 中，父组件传递给子组件的数据如果是静态数据（即不是响应式数据），则子组件会在渲染之前立刻获取到这些数据，但是并不会立刻渲染。

原因是 Vue 的更新机制采用了异步批量更新的策略。当父组件的数据发生改变时，Vue 会将这些更新操作放入一个队列中，等到下一次事件循环时批量处理这些更新操作，这样可以提高性能。

在子组件中，当它得到父组件传递过来的静态数据后，如果直接进行渲染，则可能会触发多余的 DOM 更新和计算。为了避免这种情况的发生，Vue 会在下一次更新时（即下一个事件循环）再进行渲染。

如果想让数据立即渲染在页面上可以用watch监听想渲染的数据

const prop = defineProps({
  shopData: Object,
  title: String,
});
watch(
  () => prop.shopData,
  (newVal: any, oldVal: any) => {
    imageUrl.value = newVal.shop_img;
    form.shop_dec = newVal.shop_dec;
    form.tag = newVal.tag;
    form.shop_name = newVal.shop_name;
    form.shop_price = newVal.shop_price;
  },
  { deep: true }
);