VNode 是什么?什么是虚拟 DOM?

2,444 阅读1分钟

所谓虚拟DOM,是一个用于表示真实 DOM 结构和属性的 JavaScript 对象,这个对象用于对比前后虚拟 DOM 的差异化,然后进行局部渲染从而实现性能上的优化。在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode。

换一种说法

1.     虚拟dom就是通过一个对象描述一个html结构

2.     在js对象和真实dom树之间存在的一个虚拟对象

3.     所有的dom树节点都是根据这个虚拟dom实现生成的

4.     在虚拟dom向真实的dom树转换之前会根据diff算法动态的计算需要更改的标签 进行替换操作

虚拟DOM的优势

1.  可以针对不同的终端平台 输出不同的页面展示节点
    比如:网页、微信小程序、原生应用
    
2.  在生成的时候只需要修改render方法渲染出不同的节点标签即可

为什么要用虚拟DOM?

浏览器在生成dom树的时候,非常消耗资源,因此引入虚拟dom概念通过一定的算法优化之后能够非常快捷的根据数据生成真实的html节点现在vuereact都是使用的虚拟dom

  <script>
    //虚拟dom就是通过一个对象描述一个html结构
    // 
    var vnode = [{
        tag: 'ul',
        children: [
            {
                tag: 'li',
                lable: '首页'
            }, {
                tag: 'li',
                lable: '列表页',
            }],
        calssName: 'nav',
    }];
        //通过js写一个循环把节点生成在页面上
        //需要修改某一个节点的值  可以直接修改对象上的属性
        // 然后调用render方法重新渲染页面
        // 渲染的时候回对虚拟dom中的节点做比对  只重新渲染数据改变的内容
</script>