虚拟dom的初认识和一点点的知识点总结

最新推荐文章于 2024-05-05 00:19:30 发布

原创最新推荐文章于 2024-05-05 00:19:30 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#虚拟dom #diff算法

虚拟dom 专栏收录该内容

1 篇文章

订阅专栏

虚拟DOM 和 Diff 算法

什么是虚拟DOM？

所谓的virtual dom，也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点.

为什么使用虚拟dom？（使用虚拟DOM有什么好处？）
1. 越多的真实dom操作，越损耗性能
2. 操作数据要大大的减少性能损耗，提高渲染效率

注意：vue优化的一个好处就是使用了虚拟dom

####　虚拟dom的渲染流程

1. 获取数据
2. 根据数据创建VDOM （相当于给对象赋值）
3. 根据VDOM渲染生成真实DOM ( 根据createElmeent('DIV') ) 
4. 当数据发生改变后，又会生成新的VDOM
5. 通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来，然后在进行真实DOM渲染，
    一样的内容是不会进行渲染的，这就是VDOM 的 '就地复用' | '惰性原则'

什么是Diff 算法？

dom diff 则是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染，

diff算法是用来做什么的？
- 通过 diff 算法比对多次生成的 VDOM, 将不同的内容比对出来，然后在进行真实DOM渲染，
  ** Vue 2.x版本使用的就是 VDOM ( 虚拟DOM ) **
接下我们以一个案例的形式告诉大家：列表渲染为什么要加key?

<div id="app">
    <ul>
        <li v-for = " (item,index) in lists" :key = "item.id">
            <p> {{ item.text }} </p>
            <button @click = "del( index) "> 删除 </button>
            <button @click = "change"> 修改 </button>
        </li>
    </ul>
</div>

  new Vue({
    el: '#app',
    data: {
      lists: [
        {
          id: 1,
          text: '作业'
        },
        {
          id: 2,
          text: '打篮球'
        }
      ]
    },
    methods: {
      del ( index ) {
        this.lists.splice( index, 1 )
      },
      change ( e ) { // 一下代码在操作DOM,但是我们知道vue中dom操作使用指令，所以下面代码不推荐使用
        var li = e.target.parentNode 
        li.style.background = 'red'
      }
    }
  })

jsx 在vue采用的原因
- VDOM对象树态繁琐了，如果能像hom结构一样书写就好了，这就引入了 jsx
render函数是做什么的
但是jsx始终还是不能直接去用的，必须转换成对象才能使用，
vue中使用render 函数解析jsx语法，然后换成对象结构，在通过 createElment 生成节点，渲染成
真实DOM