Vue:Vdom与组件

虚拟dom && diff算法

虚拟dom是什么？

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

虚拟dom的使用基本流程

获取数据（ ajax fetch ）

var data = {
   
      id: 1,
      name: 'XXXX'
    }

创建vdom

<div class = "box">
        <ul>
          <li> {
   {
    data.name }} </li>
        </ul>
      </div>

通过render函数解析jsx，将其转换成 vdom结构

var vdom = {
   
      tag: 'div',
      attr: {
   
        className: 'box'
      },
      content: [
        {
   
          tag: 'ul',
          content: [
            {
   
              tag: 'li',
              content: data.name
            }
          ]
        }
      ]
    }

将vdom渲染成真实dom(render函数)

数据更改

data.name = 'ZZZZ'
 vdom = {
   
      tag: 'div',
      attr: {
   
        className: 'box'
      },
      content: [
        {
   
          tag: 'ul',
          content: [
            {
   
              tag: 'li',
              content: data