Внедряются ли элементы HTML DOM в область монтирования приложения Vue js сторонним Javascript-кодом, доступным для Vue?

Question

При создании приложения Vuejs мы выбираем элемент (идентификатор и т. Д.), Чтобы подключить приложение Vue к:

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

Где наш HTML-код может выглядеть следующим образом (с помощью примера начала работы Vue):

<div id="app">
  {{ message }}
</div>

Вопрос, на который я не смог ответить после некоторого поиска в Google (из-за загрязнения поиска?), Заключается в том, вставляется ли объект Dom в эту область с помощью стороннего скрипта после начальной загрузки DOM, где этот элемент обычно будет доступно для нашего приложения Vue, если оно существует в нашем HTML, будет доступно в нашей области видимости, например:

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

Между тем, как я потратил время на публикацию этого сообщения и поиск в Google, я, вероятно, мог бы так же быстро смоделировать это, чтобы протестировать его, и на данный момент я предполагаю, что ВЕРОЯТНО Vue следит за DOM, каким он существует в любой данный момент (скорее чем то, что HTML DOM начинал как плюс все изменения приложения Vue, которые он сам сделал.)

Я подумал, что это МОЖЕТ спасти кого-то некоторое время, если ни по какой другой причине, чем название (вопроса), ближе к тому, что я (как начинающий / промежуточный разработчик Vue) гуглил, по-видимому, независимо от того, в каком документе действительно лежит ответ.

Answer 1

Да и нет.Элементы, добавленные третьими лицами, являются прямыми модификациями 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>

, а также некоторые внешние манипуляции с 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>