Vue 官方周报 #125 - 强制重新渲染Vue组件的最佳方法

Hi 👋 圣诞快乐🎄🎉

如果您需要强制重新渲染Vue组件，那么您很可能会遇到Vue的响应系统问题。根据我的经验，您可能没有正确使用Vue的响应系统。

但是在某些情况下确实需要强制重新渲染组件。一个例子是当您使用与Vue的响应系统不兼容的第三方库时。如果第三方库直接修改DOM并且没有提供一种通知Vue变化的方式，您就需要强制重新渲染组件。

下面展示使用key属性强制重新渲染Vue组件的正确方法：

<script setup>
  import { ref } from 'vue';
  const componentKey = ref(0);
  const forceRender = () => { 
    componentKey.value += 1;
  };
</script>
<template>
	<MyComponent :key="componentKey" />
	<button @click="forceRender">Force re-render</button>
</template>

每次调用forceRender都会更改componentKey值，该值作为key属性添加到MyComponent。Vue会识别这个变化，销毁旧的组件实例，并创建一个新的实例。

有关key属性的更多信息，请查看官方文档。

😂 轻松一刻

🧑🏻?💻其他新闻

📕 date-fns v3

• 👉🏻完整的TypeScript重写
• 👉🏻没有更多的运行时类型检查
• 👉🏻最小大小现在是200字节！
• 👉🏻更多…

📕 前端开发人员的7个最佳设计实践

👉🏻这篇文章强调了整体方法的重要性，提供了指针和最佳实践，最终导致更少的错误和整体延迟。

📕 JavaScript还是TypeScript？如何从二分法中获益

👉🏻并不是每个项目都需要TypeScript，但是当数据模式很重要时使用TypeScript是有用的，而JavaScript可以用于错误不那么重要的地方。

📕 input元素的隐藏属性

👉🏻本文将介绍一些不太为人所知的输入属性，如inputmode、capture等。

🛠? Webamp.org

• 👉🏻它是有史以来最伟大的MP3播放器，在浏览器中开源，内置TypeScript。
• 👉🏻值得一看的是源代码。

🛠? TSDiagram

👉🏻使用TypeScript创建图表。

🛠? TS Docs

• 👉🏻浏览npm包的类型文档。
• 👉🏻希望这将激励更多的开发人员将TSDoc注释添加到他们导出的函数中。

---

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

---

掘金2023年度人气创作者打榜中，快来帮我打榜吧～