Vue2迁移到Vue3：（一）Vue实例

Vue2实例

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

<div id="app">{{ message }}</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        message: "Hello vue2!"
    }
})

</script>

Vue3实例

选项式 API 风格

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp} = Vue

  createApp({
      data() {
        return {
          message: 'Hello vue3!'
        }
  	}
  }).mount('#app')
</script>

组合式 API 风格

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue3!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

创建一个Vue应用

import { createApp } from 'vue'

// 从一个文件组件中导入组件
import App from './App.vue'

const app = createApp({
  /* 根组件选项 */
})

挂载应用

app.mount('#app')