Vue.js 是否将HTML DOM元素注入已安装的Vue js应用程序'；Vue可访问的第三方Javascript代码的作用域？

创建Vuejs应用程序时，我们选择要将Vue应用程序装载到的元素（Id等）：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

我们的HTML代码可能如下所示（使用Vue的入门示例）：

{{message}}

在谷歌搜索之后（由于搜索污染？），我无法回答的问题是，在初始Dom加载后，由第三方脚本插入到该作用域中的Dom对象是否可以在我们的作用域中访问，如果该元素存在于我们的HTML中，Vue应用程序通常可以访问该元素，例如：

<div id="app">
    <div id="some3rdPartyDivGeneratedAfterDOMLoad">Contents here</div>
    {{ message }}
</div>

这里的内容
{{message}}

在我发布这篇文章和谷歌搜索这段时间之间，我可能可以很快地模拟出这篇文章来测试它——到目前为止，我的假设是Vue可能正在监视DOM在任何给定时刻的存在（而不是HTML DOM开始时加上它自己制作的Vue应用程序的任何更改）

---

我想这可能会节省一些时间，如果没有其他原因（问题的标题）更接近我（作为新手/中级Vue开发人员）在谷歌上搜索的内容，而不是答案所在的文档

是和否。第三方添加的元素是直接的DOM修改，不由Vue管理。它们也不会被主动销毁，但是如果插入内容的父节点被销毁，那么插入的DOM元素当然也会被销毁。插入的变量标记（例如，

{{variable}}

）不起任何作用，因为它们不是模板的一部分。您仍然可以通过DOM操作访问这些插入的节点，通过在父节点上使用

ref

，可以使访问变得更加容易。这就是你能做到的

总的来说，我建议不要向Vue应用程序中注入任何内容。相反，将其注入到vue应用程序之外，这样更有意义

查看可执行操作的测试脚本：

<template>
  <div id="comp-child1">
    <div id="part1" v-if="toggled" ref="part1">
      <div id="marker"></div>
      {{ message }}
    </div>
    <div v-else>Something else</div>

    <button @click="toggled = !toggled">Toggle</button>
    <button @click="printNodes">Print nodes under part 1</button>
  </div>
</template>

<script>
export default {
  name: "child1",

  data() {
    return {
      message: "",
      intervalRef: null,

      toggled: true
    };
  },

  mounted() {
    this.intervalRef = window.setInterval(this.changeText, 100);
  },

  beforeDestroy() {
    if (this.intervalRef) {
      window.clearInterval(this.intervalRef);
    }
  },

  methods: {
    changeText() {
      // Extremely poor randomiser
      this.message = Math.floor(Math.random() * 1000);
    },

    printNodes() {
      console.log(this.$refs.part1.childNodes);
    }
  }
};
</script>

{{message}}
别的
切换
打印第1部分下的节点
导出默认值{
姓名：“child1”，
数据（）{
返回{
消息：“”，
intervalRef:null，
切换：正确
};
},
安装的（）{
this.intervalRef=window.setInterval（this.changeText，100）；
},
在…之前{
如果（本间隔参考）{
window.clearInterval（this.intervalRef）；
}
},
方法：{
changeText（）{
//极差的随机化器
this.message=Math.floor（Math.random（）*1000）；
},
printNodes（）{
log（this.$refs.part1.childNodes）；
}
}
};

以及一些外部DOM操作：

<template>
  <div id="app">
    <p>App.vue</p>
    <router-view/>

    <button @click="addSomeDOMElementManually">Add a DOM element</button>
    <button @click="addVariableMarker">Add variable marker</button>
  </div>
</template>

<script>
export default {
  name: "App",

  methods: {
    addSomeDOMElementManually() {
      const afterMarker = document.querySelector("#marker");
      const elem = document.querySelector("#part1");

      const newElement = document.createElement("div");
      newElement.innerHTML = "<b>Hello</b>, world";
      elem.insertBefore(newElement, afterMarker);
    },

    addVariableMarker() {
      const afterMarker = document.querySelector("#marker");
      const elem = document.querySelector("#part1");

      const newElement = document.createElement("div");
      newElement.innerHTML = "{{ message }}";
      elem.insertBefore(newElement, afterMarker);
    }
  }
};
</script>

App.vue

添加一个DOM元素
添加变量标记
导出默认值{
名称：“应用程序”，
方法：{
手动添加somedomelements（）{
const afterMarker=document.querySelector（“标记”）；
const elem=document.querySelector（“第1部分”）；
const newElement=document.createElement（“div”）；
newElement.innerHTML=“你好，世界”；
元素插入前（新元素，后标记）；
},
addVariableMarker（）{
const afterMarker=document.querySelector（“标记”）；
const elem=document.querySelector（“第1部分”）；
const newElement=document.createElement（“div”）；
newElement.innerHTML=“{message}}”；
元素插入前（新元素，后标记）；
}
}
};

<template>
  <div id="app">
    <p>App.vue</p>
    <router-view/>

    <button @click="addSomeDOMElementManually">Add a DOM element</button>
    <button @click="addVariableMarker">Add variable marker</button>
  </div>
</template>

<script>
export default {
  name: "App",

  methods: {
    addSomeDOMElementManually() {
      const afterMarker = document.querySelector("#marker");
      const elem = document.querySelector("#part1");

      const newElement = document.createElement("div");
      newElement.innerHTML = "<b>Hello</b>, world";
      elem.insertBefore(newElement, afterMarker);
    },

    addVariableMarker() {
      const afterMarker = document.querySelector("#marker");
      const elem = document.querySelector("#part1");

      const newElement = document.createElement("div");
      newElement.innerHTML = "{{ message }}";
      elem.insertBefore(newElement, afterMarker);
    }
  }
};
</script>