Vue 周报 #127 - 监听插槽变化

有时候你可能需要对插槽内容的更改做一些事情。例如插槽中有一个动态项目列表，你可能希望在插槽内容更改时更新该列表相关的数据。

不幸的是，Vue没有提供一个内置的方式来观察插槽的变化，但是你可以使用MutationObserver API来对插槽内容的变化做出调整。它是一个内置的浏览器API，因此与框架无关：

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';

defineProps<{ msg: string }>();

const slotElement = ref(null);
const observer = ref(null);

const update = () => {
  console.log('UPDATE');
};

onMounted(() => {
  observer.value = new MutationObserver(update);

  observer.value.observe(slotElement.value, {
    childList: true,
    subtree: true,
  });
});

onBeforeUnmount(() => {
  if (observer.value) {
    observer.value.disconnect();
  }
});
</script>

<template>
  <h1>{{ msg }}</h1>
  <div ref="slotElement">
    <slot />
  </div>
</template>

如果组件被挂载，我们创建一个新的MutationObserver实例并调用observe方法开始观察slot元素。我们传递update方法作为回调函数，并传递一个带有childList和subtree选项的对象来观察插槽内容的变化。

当组件被卸载时，我们调用disconnect方法来停止观察slot元素。这是避免内存泄漏所必需的。

可以在下面的demo项目中尝试一下。每次单击“Increment”按钮时，都会调用update方法并将一条消息记录到控制台：

这是demo演示地址：https://stackblitz.com/edit/vue-tip-watch-slot-changes

😂 轻松一刻

Vue

📕即将推出的Vue 3 “Vapor Mode”

👉🏻让我们一起来看看，什么是Vapor Mode，Vapor Mode是如何工作的，Vapor Mode的未来是什么！

📕我从React.js到Vue.js的旅程

👉🏻在这篇文章中，作者分享了他转向Vue.js的影响
👉🏻他谈到了学习曲线的高点和低点，这些框架之间的差异，以及它对他职业生涯的影响。

📕通过轮询在Vue应用中实时更新

👉🏻本文介绍了Vue应用程序中轮询的概念。

🛠?neoconfetti/vue

👉🏻使用Vue在您的页面上显示令人敬畏的五彩纸屑爆炸。
👉🏻SSR友好，在Nuxt中工作起来很有魅力。

🧑🏻?💻其他新闻

📕现代方式在JavaScript中深拷贝

👉🏻内置于JavaScript运行时中的结构化克隆函数可用于制作JavaScript中对象的深拷贝。

📕缓存基础知识速成课程

👉🏻本文深入探讨不同类型的缓存，如页面、内容、数据、指令、浏览器和查询缓存。

📕Web性能入门

👉🏻看看如何通过策略，工具和提示来提高网站的性能，以帮助您做出显著的改进。

🎮Dungeons and Directories

👉🏻一个可以在文件浏览器中玩的开源短文本冒险游戏。

---

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

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