vdom (virtual dom)

什么是 vdom，为何要用 vdom

virtual dom, 虚拟 DOM
用 JS 模拟 DOM 结构
DOM 变化的对比，放在 JS 层来做（图灵完备语言）
提高重绘性能

<ul id='list'>
  <li class='item'>Item 1</li>
  <li class='item'>Item 2</li>
</ul>

1
2
3
4

{
  tag: 'ul',
  attrs: {
    id: 'list'
  },
  children: [
    {
      tag: 'li',
      attrs: { className: 'item' },
      children: ['Item 1']
    },
    {
      tag: 'li',
      attrs: { className: 'item' },
      children: ['Item 2']
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

用 jQuery 实现

<div id='container'></div>
<button id='btn-change'></button>

<script>
  var data = [
    {
      name: '张三',
      age: 20,
      address: '北京'
    },
    {
      name: '李四',
      age: 21,
      address: '上海'
    },
    {
      name: '王五',
      age: 22,
      address: '广州'
    }
  ]

  // 渲染函数
  function render(data) {
    var $container = $('#container')

    // 清空现有内容
    $container.html('')

    // 拼接 table
    var $table = $('<table>')
    $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
    data.forEach(function (item) {
      $table.append($('<tr><td>' + item.name + '</td><td>' +
        item.age + '</td></td>' + item.address + '</td></tr>'))
    })

    // 渲染到页面
    $container.append($table)
  }

  // 修改信息
  $('#btn-change').click(function () {
    data[1].age = 30
    data[2].address = '深圳'
    render(data)
  })
  // 初始化时候渲染
  render(data)
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

遇到的问题

DOM 操作是 "昂贵" 的，js 运行效率高
尽量减少 DOM 操作，而不是 "推到重来"
项目越复杂，影响就越严重

# vdom (virtual dom)

# 什么是 vdom，为何要用 vdom

# 用 jQuery 实现

# 遇到的问题

vdom (virtual dom)

什么是 vdom，为何要用 vdom

用 jQuery 实现

遇到的问题