在 vue 组合中使用 querySelector() API

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

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

const navbar = ref(null);

但是，您应该等待组件被挂载以观察：

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

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

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

Answer 2

您 document.querySelector 调用返回 null 的原因是 DOM 尚未包含该元素。 script setup运行时创建组件，所以组件的DOM还没有创建

安装组件后，您可以使用 onMounted 生命周期挂钩运行代码。我创建了 a playground 来证明这一点。

来自the docs：

For example, the onMounted hook can be used to run code after the component has finished the initial rendering and created the DOM nodes

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

在 vue 组合中使用 querySelector() API

Using querySelector() in vue Compostion API

vuejs3

vue-composition-api