Как добавить узел Dom, созданный с JavaScript к vue, используя vue функции рендеринга

Question

У меня есть функция JavaScript, которая возвращает узел DOM, который представляет древовидное представление со многими вложенными узлами внутри него, я хотел бы знать, можно ли передать эту функцию в vue функцию рендеринга ??

Я знаю, что я не должен возиться с DOM или, может быть, вместо этого использовать рекурсивный шаблон, но ради самообучения и испытаний я все же хотел бы выяснить это ... как манипулировать DOM внутри Vue, с помощью функций рендеринга.

Спасибо за любую помощь.

Answer 1

Я не знаю ни одного механизма, чтобы сделать это (по крайней мере, официально). Функция рендеринга - не то место, где можно каким-либо образом манипулировать DOM.

Вы все еще можете аккуратно манипулировать DOM вне функции рендеринга, не беспокоясь Vue. Если у вас есть пустой заполнитель <div> в вашем шаблоне с ref, то добавление дочернего элемента к нему должно быть нормальным, пока элемент DOM остается на месте (использование v-if в div может помешать, но я Я не уверен на 100% в этом). Vue обычно хорошо справляется с повторным использованием одного и того же элемента DOM при повторном рендеринге - но в том-то и дело, что вы связываетесь с DOM, который Vue считает, что он полностью контролирует, и вам не гарантируется Vue будет сотрудничать с любыми внешними изменениями в DOM, которых он не ожидал.

Подумав об этом, вы можете достичь того, чего хотите, с помощью пользовательской директивы или компонента Vue. Примерно так:

Vue.directive('el', {
  bind(el, binding) {
    if (binding.value) {
      el.appendChild(binding.value)
    }
  },
  update(el, binding) {
    // Check if bound element changed
    if (binding.oldValue !== binding.newValue) {
      if (binding.oldValue) {
        // Remove old element
        binding.oldValue.remove()
      }
      if (binding.value) {
        // Append new element
        el.appendChild(binding.value)
      }
    }
  }
})

// Create a DOM element manually
const btn = document.createElement('button')
btn.textContent = 'Click'

new Vue({
  el: '#app',
  render(h) {
    return h('div', {
      directives: [
        {
          name: 'el',
          value: btn
        }
      ]
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>