1.     真实DOM: 文档对象模型, 是网页中标签在js中的映射对象, 每一个标签都是一个dom元素对象<br />        虚拟DOM: 通过js对象结构模拟html标签结构的一种数据格式, 他并不是标签元素, 只不过结构和标签元素结构相似而已, 虚拟dom只针对数据对象操作, 与界面视图无关, 故,虚拟dom执行效率比真实dom执行效率高很多
    1. <body>
    2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    3.     <div id='myApp'>
    4.         vue2.0开始, vue中引入了虚拟dom的概念(抄react),  虚拟dom实质上是使用js对象代替了dom元素结构, 数据更新是遍历dom替换成了遍历js对象, 大大提高了遍历执行的速度和效率, 使页面渲染更新更加高效, 节省内存和性能
    6.         <button @click="btnClick">更新</button>
    7.         <h1 id="title">{{name}}</h1>
    8.         <div id="d1"> 
    9.             <span class="more">更多内容</span> 
    10.         </div>
    11.     </div>
    12.     <script>
    13.         new Vue({
    14.             el: '#myApp',
    15.             data: {
    16.                 name: "张三"
    17.             },
    18.             methods: {
    19.                 btnClick(){
    20.                     // this.name = "李四"   // 正常的数据更新
    21.                     // 虚拟DOM实现步骤3: data数据更新时, 会调用数据底层的set函数
    22.                     this.nameSet("李四") 
    23.                 },
    24.                 // 模拟实现name字段的set函数
    25.                 nameSet(name){
    26.                     this.name = name
    27.                     // 虚拟DOM实现步骤4: 在data数据更新之后, 创建一个新的虚拟dom树 
    28.                     this.virtualDOM2 = {
    29.                         name: "div",
    30.                         attr: [
    31.                             {id: "myApp"}
    32.                         ],
    33.                         children: [
    34.                             {
    35.                                 name: "button",
    36.                                 events: [
    37.                                     {click: this.btnClick}
    38.                                 ],
    39.                                 children: "更新"
    40.                             },
    41.                             {
    42.                                 name: "h1",
    43.                                 attr: [
    44.                                     {id: 'title'}
    45.                                 ],
    46.                                 children: this.name
    47.                             },
    48.                             {
    49.                                 name: "div",
    50.                                 attr: [
    51.                                     {id: 'd1'}
    52.                                 ],
    53.                                 children: [
    54.                                     {
    55.                                         name: "span",
    56.                                         attr: [
    57.                                             {class: "more"}
    58.                                         ],
    59.                                         children: "更多内容"
    60.                                     }
    61.                                 ]
    62.                             }
    63.                         ]
    64.                     }
    65.                     console.log(this.virtualDOM1, this.virtualDOM2)
    67.                     // 虚拟DOM实现步骤5:拿新的虚拟dom对象和原来的虚拟dom对象做对比, 找出他们之间的最小差异, 把新老虚拟dom树传入一个diff函数内,计算差异, diff函数中有算法(叫diff算法)用于计算dom树差异,也是虚拟dom中的核心算法 
    68.                     // var diffArr = Vue.diff(this.virtualDOM1, this.virtualDOM2) 模拟diff算法的调用
    69.                     var difArr = [
    70.                         {
    71.                             query: "#title",
    72.                             value: '李四'
    73.                         }
    74.                     ]
    76.                     // 虚拟DOM实现步骤5: 遍历最小差异数组, 执行真实dom操作, 针对性的更新数组中涉及到的标签元素, 实现局部刷新
    77.                     difArr.forEach(item=>{
    78.                         document.querySelector(item.query).innerText = item.value
    79.                     })
    81.                 }
    82.             },
    83.             created() {
    84.                 // 虚拟DOM实现步骤1: 在vue对象初始化时, 把vue模板中dom标签结构转换成虚拟dom对象结构
    85.                 this.virtualDOM1 = {
    86.                     name: "div",
    87.                     attr: [
    88.                         {id: "myApp"}
    89.                     ],
    90.                     children: [
    91.                         {
    92.                             name: "button",
    93.                             events: [
    94.                                 {click: this.btnClick}
    95.                             ],
    96.                             children: "更新"
    97.                         },
    98.                         {
    99.                             name: "h1",
    100.                             attr: [
    101.                                 {id: 'title'}
    102.                             ],
    103.                             children: this.name
    104.                         },
    105.                         {
    106.                             name: "div",
    107.                             attr: [
    108.                                 {id: 'd1'}
    109.                             ],
    110.                             children: [
    111.                                 {
    112.                                     name: "span",
    113.                                     attr: [
    114.                                         {class: "more"}
    115.                                     ],
    116.                                     children: "更多内容"
    117.                                 }
    118.                             ]
    119.                         }
    120.                     ]
    121.                 }
    122.             },
    123.             beforeMount() {
    124.                 // 虚拟DOM实现步骤2: 使用虚拟dom对应的找到动态数据所在的标签把动态数据渲染到视图上
    125.                 document.getElementById("title").innerText.replace("{{name}}", this.name)
    126.             },
    129.         })
    130.     </script>
    131. </body>