vue 强制更新子组件

关于 Vue key 的使用（类比React key）

场景：父组件下的子组件需要特定条件下重新渲染(组件生命周期或者说是生命周期下的副作用重新执行)

需要注意两点

1. vue 中 key 为关键字，使用时需要注意 key 更新，组件 template 会被重新渲染，但是实例生命周期不会被再次执行。
2. 如果需要额外的副作用需要 watch 检测 [attribute] 的变化执行副作用。

Vue 示例

// 父组件
<template>
  <Child :random="key" />
</template>

// 子组件
<script>
export default {
  props: {
    random: [Number],
  },
  watch: {
    random() {
      // 一些操作
      // fetch...
    },
  },
};
</script>

React 示例

// 父组件
<Child key={random} />