vue 强制刷新组件重新渲染

问题：子组件渲染的数据是在子组件的函数内处理过，但是父组件将数据更新后，子组件渲染的数据是直接更新的数据，并未触发函数重新渲染，为了解决这个问题，就将子组件重新渲染
解决：https://www.cnblogs.com/zyulike/p/12036456.html
我用的是他的解决方案二，好用极了

解决方案二：

通过vue key 实现，原理官方文档。所以当key 值变更时，会自动的重新渲染。（推荐）

 <code-box id="T6EE6M" style="padding: 0px; margin: 10px 0px; position: relative; display: block;"><pre id="pre-T6EE6M" class="hljs xml mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar" style="padding: 10px !important; margin: 5px 15px; display: block; overflow: visible; line-height: 1.3em; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 5px !important; touch-action: auto; overflow-wrap: break-word; font-family: &quot;Ubuntu Mono&quot;, monospace !important; font-size: 14px !important; font-weight: 400; white-space: pre; word-break: break-all; counter-reset: itemcounter 0; position: relative;">

<code-pre class="code-pre" id="pre-KEb7yW" style="padding: 0px 0px 0px 10px; margin: 0px; position: relative; display: block;"><template>
   <third-comp  :message="menuData"  :key="menuKey"/>
</template>

<script>  export default{ data(){ return { menuKey:1, 　　　　　        menuData: "",　
 } }, watch:{ menuData(){ ++this.menuKey } } } </script></code-pre>

</pre></code-box>