Question

我是虚拟DOM话题的新手，最近几天我一直在思考它应该如何工作。

让我们想象一下，我的项目中有一个简单的模板引擎，例如twig。我正在使用vue.js作为javascript框架。所以我可以构建以下页面：

<div id="app">
    <p>Some text</p>
    <ul>
        <li v-for="item in items">{{ item }}</li>
    </ul>
    <component><component/>
</div>

<template id="component">
      <div class="center-xs">
          <div class="row">
               <div class="col-xs-12">
                   Some text
               </div>
          </div>
      </div>
</template>

<script>
   Vue.component('component', {
       template: '#component'
   });
   var app = new Vue({
        el: '#app',
        data: {
            items: ['item1', 'item2']
        }
    });
</script>

代码的哪一部分是Virtual DOM：

一个。没什么
湾#app
℃。 Items和component
d。仅component

为什么？如果与我分享任何信息（链接，您的想法，官方文档），那就太棒了。

谢谢你！

Answer 1

<div id=app>中的代码（例如<p> <ul>）不是DOM，它是HTML标记，然后浏览器解析然后呈现为DOM。由于#app元素中存在html代码，因此Vue将其作为其模板的一部分包含在内，因此成为Virtual DOM的一部分。虽然从技术上讲，由于<p>元素从未对其执行过任何Vue操作，因此会被忽略。

如果您在浏览器中安装了Vue Devtools扩展，则可以在组件视图中查看Virtual DOM的表示形式。 <ROOT>当然是您的#app div，然后您只会看到<components>，而不是<p>元素，甚至是<ul><li>元素。

最好不要在根元素中包含任何html标记或其他组件标记。简单地<div id='app'></div>然后让Vue通过Virtual DOM专门呈现所有其他元素。这只是通过render函数实现的。

new Vue({
  el: '#app',
  components: {
   TopLevelComponent
  },
  render: function(createElement) {
    return createElement(TopLevelComponent);
  }
})

https://vuejs.org/v2/guide/render-function.html#The-Virtual-DOM

哪部分代码将呈现为虚拟DOM？

1 个答案: