在 vue Composition API 中使用 querySelector()

Question

我是 Vue 组合 API 的新手，需要使用 Document 方法 querySelector。但是，它没有按预期工作。如果我写

<nav class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">

<script setup>
import { ref } from "vue";
const observer = new IntersectionObserver(handleIntersection);
const target = document.querySelector(".home-menu");
observer.observe(target);
console.log(target);

目标为空。阅读文档我看到了 ref 属性，如果我

<nav ref="navbar" class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
<script setup>
import { ref } from "vue";

const target = ref("navbar");
console.log(target);

我安慰一个对象。 ref 是在组合 API 中获取 DOM 元素的方式吗？我现在可以在我的观察者对象中使用 target 吗？它等同于querySelector吗？我试过这个

import { ref } from "vue";
const observer = new IntersectionObserver(handleIntersection);

const target = ref("navbar");
observer.observe(target);

但有错误

未捕获的类型错误：IntersectionObserver.observe：参数 1 未实现接口元素。

谢谢。

Answer 1

document.querySelector 返回 null 的原因是 DOM 尚未包含该元素。 script setup 在组件运行时运行创建，因此组件的 DOM 尚未创建。

您可以使用 onMounted 生命周期钩子在安装组件后运行代码。我创建了a playground 来演示这一点。

来自the docs：

例如，onMounted 钩子可用于在组件完成初始渲染并创建 DOM 节点后运行代码

要实现您想要的，请执行以下操作：

• 创建一个ref：

  const navbar = ref(null);
  

• 通过将元素上的 ref 属性设置为您用于 ref 变量的名称，将 ref 变量连接到元素：

  <nav ref="navbar" ...>
  

• 挂载组件时连接观察者：

  onMounted(() => {
    observer.observe(target);
  })
  

• 卸载组件时断开观察者：

  onBeforeUnmount(() => {
    observer.disconnect();
  })
  

这是链接文档中的生命周期图（由于 Imgur/SO，背景颜色错误）：

Answer 2

您可以使用 ref 方法，使用您在模板中声明 ref 的相同名称调用变量：

const navbar = ref(null);

但是，您应该等待要安装的组件以观察：

onMounted(() => {
  observer.observe(target);
})

还记得在卸载组件时断开它：

onBeforeUnmount(() => {
  observer.disconnect();
})