Vue.js 中的 V-DOM 和 diff 算法

Vue.js 中的 VDOM 和 diff 算法

    • 1. 为什么要使用 VDOM (虚拟DOM)
    • 2. 虚拟dom(vdom)是什么?
    • 3. 虚拟dom的使用基本流程
    • 4.diff算法是什么?
      • 总结:

1. 为什么要使用 VDOM (虚拟DOM)

大量的DOM操作会大量增加时间消耗,性能的消耗
而数据的操作,时间和性能的消耗就很少
因此我们应该先进行数据操作,在进行DOM操作
因此我们 引入了虚拟DOM

2. 虚拟dom(vdom)是什么?

它是一个Object对象模型,用来模拟真实的DOM节点的结构


	
<ul> <li> 这里是1903 li> ul> div> var vdom = { tag: 'div', attr: { className: 'box' }, content: [ { tag: 'ul', content: [ { tag: 'li', content: "这里是1903", ] } ] }

3. 虚拟dom的使用基本流程

  1. jsx = js+ XML可以在js中使用标签,
  2. 然后通过 render函数 进行解析成 VDOM 结构
  3. 最后通多 render函数,将 VDOM 渲染 成真实DOM

4.diff算法是什么?

  • diff算法来自后端
    vue中将 虚拟dom的diff算法放在了 patch.js文件中
    使用js来进行两个对象的比较( vdom 对象模型)
  • 当文件发生变化时,就用上了 diff算法
  • 当文件发生变化的时候,diff算法 就会比较新旧两个文件的差别,并将两个文件的不同之处生成一个补丁对象(patch)
  • diff算法 是比较同级的。
    给每一个层级打一个标记,这个标记是一个数字( 这个数字就是 key )
  • 根据key 将补丁(patch)对象渲染都页面中改变的结构上,而其他地方不变(不做重新渲染)这是虚拟DOM的惰性原则。

总结:

  • 其实说了这么多,都是不需要我们做的,都是有Vue帮我们做的。
  • 当我们实例 Vue 时,使用 " el = ‘#id’ "引入模块的时候 Vue 帮我们做的。
  • " el = ‘#id’ " 做了什么呢?
    • 将选择的元素引入到js中,相当于在js中放入DOM模块。也就是 jsx语法。
    • 然后就是 render函数表现的时候了。

你可能感兴趣的:(Vue)