Vue3 如何通过虚拟DOM更新页面详解

Vue3 如何通过虚拟DOM更新页面，下面是完整攻略。

什么是虚拟DOM

虚拟DOM是DOM的 JavaScript 对象表示形式。虚拟DOM可以更便捷地对页面进行操作，避免频繁地修改页面真实DOM，节省运算提高性能。Vue3 采用了 VNode 来表示虚拟DOM。

一个简单的 VNode 示例：

VNode: {
  tag: 'div', // 标签名称
  props: { id: 'app' }, // 标签属性
  children: [ // 子元素
    VNode: {
      tag: 'h1',
      children: 'Hello World!'
    },
    ...
  ],
  ...
}

虚拟DOM的更新

在 Vue3 中，当数据发生改变时，会先计算出新的 VNode，然后比较新旧 VNode，找到需要更新的地方，最终通过修改真实DOM来更新页面。

1. 创建 Vue3 及相关代码

首先需要安装 Vue3：

npm install vue@next

然后在 HTML 中引入 vue.js。

<script src="./vue.js"></script>

2. 创建 data 数据对象

创建一个数据对象，在示例中我们创建一个简单的计数器：

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

3. 创建计数器示例

接下来创建一个计数器组件示例：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

在 template 中展示当前的计数器数值，并绑定一个点击事件。

4. 将组件挂载到页面上

最后将组件挂载到页面中：

app.mount('#app')

具体代码实现如下：

<div id="app"></div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
      }      
    },
    template: `
    <div>
      <p>{{ count }}</p>
      <button @click="increment">+</button>
    </div>
    `
  })
  app.mount('#app')
</script>

这样就可以创建一个简单的计数器页面，点击加号按钮时可以增加计数器数值。

5. 更改数据并更新页面

当我们点击计数器加号按钮时，需要更新页面来显示新的计数器数值。

在 Vue3 中，只需要更改 data 数据对象中的数据，就会成功触发虚拟DOM的更新机制，自动计算出新的VNode，并更新真实页面中的DOM。

methods: {
  increment() {
    this.count++
  }      
}

这样就完成了通过虚拟DOM更新页面的操作。

下面是一个完整的示例代码：

<div id="app"></div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
      }      
    },
    template: `
    <div>
      <p>{{ count }}</p>
      <button @click="increment">+</button>
    </div>
    `
  })
  app.mount('#app')
</script>

示例

下面给出一个购物车的示例：

<template>
  <div>
    <p>商品列表：</p>
    <ul>
      <li v-for="(item, index) in itemList" :key="item.id">
        <span>{{ item.name }}</span>
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
    <button @click="addItem">添加商品</button>
  </div>
</template>

<script>
  const VNode = Vue.createVNode

  export default {
    data() {
      return {
        itemList: [
          { id: 1, name: '商品1' },
          { id: 2, name: '商品2' },
          { id: 3, name: '商品3' }
        ]
      }
    },
    methods: {
      addItem() {
        const newItem = {
          id: this.itemList.length + 1,
          name: '新商品'
        }
        this.itemList.push(newItem)
      },
      removeItem(index) {
        this.itemList.splice(index, 1)
      }
    },
    render() {
      const itemList = this.itemList.map(item => {
        return VNode('li', { key: item.id }, [
          VNode('span', {}, item.name),
          VNode('button', { onClick: () => this.removeItem(item) }, '删除')
        ])
      })
      return VNode('div', {}, [
        VNode('p', {}, '商品列表：'),
        VNode('ul', {}, itemList),
        VNode('button', { onClick: this.addItem }, '添加商品')
      ])
    }
  }
</script>

我们在组件中定义了一个简单的商品列表数据对象 itemList，通过 v-for 指令来渲染商品列表。当我们添加或删除商品时，只需要更改 itemList 数据对象中的数据，Vue 会自动计算出新的VNode，并更新真实页面中的 DOM。

这里我们使用了 render 函数来生成 VNode 虚拟DOM，而不是使用 template。这是因为 template 是可编译的，所以比 render 慢。

完整的使用虚拟DOM更新购物车页面的代码如下：

<template>
  <div id="shopping-cart"></div>
</template>

<script>
  const VNode = Vue.createVNode

  export default {
    data() {
      return {
        itemList: [
          { id: 1, name: '商品1' },
          { id: 2, name: '商品2' },
          { id: 3, name: '商品3' }
        ]
      }
    },
    methods: {
      addItem() {
        const newItem = {
          id: this.itemList.length + 1,
          name: '新商品'
        }
        this.itemList.push(newItem)
      },
      removeItem(index) {
        this.itemList.splice(index, 1)
      }
    },
    render() {
      const itemList = this.itemList.map(item => {
        return VNode('li', { key: item.id }, [
          VNode('span', {}, item.name),
          VNode('button', { onClick: () => this.removeItem(item) }, '删除')
        ])
      })
      return VNode('div', { id: 'shopping-cart' }, [
        VNode('p', {}, '商品列表：'),
        VNode('ul', {}, itemList),
        VNode('button', { onClick: this.addItem }, '添加商品')
      ])
    }
  }
</script>