Vue虚拟dom被创建的方法

在Vue中，虚拟DOM是由Vue内部的渲染函数或模板编译器创建的。创建虚拟DOM的方法有两种：手动使用渲染函数和自动使用模板编译器。

手动使用渲染函数

使用Vue提供的渲染函数可以手动的创建虚拟DOM。渲染函数是一个函数式组件，它接收一个用于描述组件模板的函数createElement作为参数，并返回一个表示组件VNode节点的JavaScript对象。下面是一个简单的使用渲染函数手动创建虚拟DOM的示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  render(createElement) {
    return createElement(
      'div',
      this.message
    )
  }
}
</script>

在上面的示例中，使用了render函数替代了template模板。render函数接收一个createElement参数，这个函数内部就是调用这个函数来创建虚拟DOM：

createElement('div', this.message)

这里要注意，createElement函数的第一个参数是要创建的节点类型，可以是字符串类型，也可以是组件类型，这里我们创建的是一个div标签。第二个参数是节点的属性和内容，这里我们使用了data中的message属性。

自动使用模板编译器

Vue的模板编译器可以在运行时动态将模板编译成渲染函数，并创建虚拟DOM。使用模板可以更加直观、易于理解。下面是一个使用模板编译器自动创建虚拟DOM的示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

在这个示例中，我们只需要使用template模板即可，vue-loader会在打包后通过vue-template-compiler将模板编译成渲染函数并创建虚拟DOM。

总结一下，Vue虚拟DOM被创建的方法有两种，一种是手动使用Vue提供的渲染函数创建，另一种是自动使用模板编译器创建。无论哪种方式，都能够创建出相应的虚拟DOM。