vue的虚拟dom

1. 什么是虚拟dom

在vue中如何用虚拟dom

定义真实dom

<div id="app">
    <p class="p">节点内容</p>
    <h3>{{ foo }}</h3>
</div>

实列化vue

const app = new Vue({
    el:"#app",
    data:{
        foo:"foo"
    }
})

vue源码中render函数渲染虚拟dom

(function anonymous() {
 with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
       [_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})

2. 为什么需要虚拟dom

dom是很慢的其非常的庞大，页面性能问题，大部分是由dom操作引起的
真实的DOM节点，哪怕一个最简单的div也包含着很多属性，可以打印出来直观感受一下：

由此可见，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验