0

我是虚拟 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>

代码的哪一部分是虚拟 DOM：

  • 一个。没有什么
  • 湾。里面的一切#app
  • C。Items和component
  • d。仅有的component

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

感谢你！

4

1 回答 1

0

<div id=app>(eg )中的代码<p> <ul>不是 DOM，它是浏览器解析并呈现为其 DOM 的 HTML 标记。由于 #app 元素中存在现有的 html 代码，它将被 Vue 作为其模板的一部分包含在内，从而成为 Virtual DOM 的一部分。尽管从技术上讲，由于该<p>元素从未对其执行任何 Vue 操作，但它被忽略了。

如果您在浏览器中安装了 Vue Devtools 扩展，您可以在组件视图中看到虚拟 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

于 2018-01-22T22:29:42.233 回答