第一节: 全面细致的理解创建vue3应用的 createApp函数

1. createApp 创建应用

1.1. createApp 函数理解

每个 Vue 应用实例都是通过 createApp 函数创建;每次调用函数都会返回一个新的应用对象;

使用方式

import {
   
   createApp} from 'vue'

const app = createApp({
   
   
  // ...options
})

通过源码或vue官网, 可以知道createApp函数的类型如下

function createApp(rootComponent: Component, rootProps?: object): App

通过类型可以看出 createApp 接收两个参数:

1. 第一个参数为根组件对象(可以是.vue单文件组件, 可以是组件对象), 是必传参数,
2. 第二个参数为传递给根组件的props, 第二个参数时可选参数

createApp 返回一个App 类型的应用对象.如果要详细了解App类型, 可以查看源码. 我们可以通过在控制台输出的方式, 查看返回的应用对象都具有哪些属性.

1.2. 应用对象

createApp函数调用完后返回一个应用对象.

示例:

import {
   
   createApp} from 'vue'
const vm =createApp({
   
   
})
console.log('vm', vm)

控制台输出结果:

通过控制台输出可以看到很多熟悉的单词, 比如component表示组件, directive表示指令, 具体如何使用, 我们娓娓道来

分析完createApp函数的返回值, 接下来我们详细研究一下参数

2. createApp API 参数

createApp函数接受两个参数, 第二个参数是可选地,

第一个参数有两种形式

1. 直接传入单文件组件, 作为根组件
2. 使用vue选项对象
   
   

2.1. createApp 参数单文件组件

通过createApp函数的类型可知, createApp至少传一个参数, 参数可以为单文件组件

示例:

根组件代码:

<template>
  <div>这是一个新的根组件</div>
</template>

<script lang="ts">
import {
     
      defineComponent } from "vue";

export default defineComponent({
     
     });
</script>

入口函数main.ts

import {
   
    createApp } from 'vue'

// 导入单文件组件
import App from './App.vue'

// 将单文件组件App作为参数传递给createAPP
const app = createApp(App)

运行结果:

2.2. createApp 参数组件选项对象

createApp的第一个参数除了可以是单文件组件, 也可以是选项对象

在vue2中我们通过template选项添加模板渲染内容

在vue3中, 我们也可以使用使用tempate选项定义渲染模板

示例:

// 引入完整vue代码, 包括运行时 + 编译器