无法从 JavaScript 访问 VueJS DOM答案

【问题标题】：VueJS DOM is not accessible from JavaScript无法从 JavaScript 访问 VueJS DOM
【发布时间】：2020-07-25 00:08:48
【问题描述】：

我有一个简单的 VueJS 应用程序，它循环以下 DOM 示例：

<div v-for="site in topSites" class="col text-center topSites resBoo">...

因此它会生成重复的divs 类.topSites。

使用 vanilla JS，我无法访问 VueJS 生成的 DOM。例如：

document.body.querySelectorAll('.topSites').forEach(i => {i.style.background = 'blue'; console.log('aa',i)})

它确实有效，即querySelectorAll 方法找不到元素。然而，从浏览器的控制台运行上面的例子，工作正常。

在声明了Vue对象之后，我尝试过放置上面的代码。即：

var app = new Vue({
  el: '#app',
  data: {...}
})

有没有办法从 Vue 外部访问 Vue 生成的 DOM？

【问题讨论】：

通常这样的问题是由于在 DOM 实际存在之前尝试基于 DOM 做某事引起的。您使用 VueJS 的事实不会使基本的浏览器功能无法正常工作，但如果您尝试 before Vue 实际创建了这些元素，那么显然它不会工作。
我认为你可以使用vue refs。 blog.logrocket.com/…
@SajeebAhamed refs 是从 Vue 本身访问应用程序的 DOM，我需要从 Vue 外部访问它。
@Pointy 如何从 Vue 外部访问 Vue 生成的 DOM，下面的答案中提到的 created 挂钩有效，但它使用 Vue 本身。
好吧，如果你使用像 VueJS 这样的框架，你就会被它的工作方式所困扰。不知何故，您的非 Vue 代码必须弄清楚应用程序的其余部分何时构建 DOM，与使用框架提供的工具相比，这在我看来是一种脆弱且容易出错的方法。

标签： javascript vue.js dom vuejs2

【解决方案1】：

您应该在 mounted 或 updated 生命周期挂钩中执行 DOM 自定义操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.common.dev.js"></script>
<body>
    <div id="app">
        <div v-for="site in topSites" class="col text-center topSites resBoo">{{site}}</div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            topSites: ["site 1", "site 2"],
        },
        mounted: function () {
            const elems = document.body.querySelectorAll('.topSites');
            elems.forEach(i => {i.style.background = 'blue'; console.log('aa',i)});
        }
    })    
</script>
</html>

【讨论】：

或者在created钩子里。
在挂载时它返回空的 NodeList，但创建了作品！ @指挥官
在挂载时它返回空的 NodeList，嗯，奇怪。在发布之前，我已经测试了自己的示例。