1、Vue.createApp() 方法的介绍
每一个 Vue.js 的应用都需要创建一个应用程序的实例对象并挂载到指定 DOM 上。在 Vue3.0 中，创建一个应用程序实例的语法格式如下：
Vue.createApp(App)createApp() 是一个全局 API，它接收一个根组件选项对象作为参数。选项对象中包括数据、方法、生命周期钩子函数等选项。创建应用程序实例后，可以调用实例的 mount() 方法，将应用程序实例的根组件挂载到指定的 DOM 元素上。这样，该 DOM 元素中的所有数据变化都会被 Vue 监控，从而实现数据的双向绑定。例如，要绑定的 DOM 元素的 id 属性值为 app，创建一个应用程序实例并绑定到该 DOM 元素的代码如下：
Vue.createApp(App).mount('#app')下面分别对组件选项对象中的几个选项进行介绍：
1.1 数据
在组件选项对象中有一个 data 选项，该选项的是一个函数，Vue 在创建组件实例时会调用该函数。data() 函数可以返回一个数据对象，应用程序实例本身会代理数据对象中的所有数据。
1.2 方法
在创建的应用程序实例中，通过 methods 选项可以定义方法。应用程序实例本身也会代理 methods 选项中的所有方法，因此也可以像访问 data 数据那样来调用方法。
1.3 初始化
Vue 应用程序的初始化操作，可以使用生命周期钩子的 created() 方法，该方法会在实例创建之后进行调用，此时尚未开始 DOM 编译。在需要初始化处理一些数据时会比较有用。
2、综合实例
【实例】创建一个简单的Vue3.0应用程序 ，实例用户信息的初始化与数据绑定。执行结果如下图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="pan_junbiao的博客">
<title>Vue实例</title>
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
<p>用户ID：{{userInfo.userId}}</p>
<p>用户名称：{{userInfo.userName}}</p>
<p>博客信息：{{userInfo.blogName}}</p>
<p>博客地址：{{userInfo.blogUrl}}</p>
</div>
</body>
<!-- 第一步骤：引入 Vue 框架 -->
<!-- 下载地址：https://unpkg.com/vue@3.4.38/dist/vue.global.js -->
<script src="../js/vue.global.js"></script>
<script type="text/javascript">
//第二步骤：使用 Vue.createApp 函数创建一个应用程序实例
const vueApp = Vue.createApp({
//数据
data() {
return {
title: "Vue3.0 使用 Vue.createApp() 创建一个应用程序 ",
userInfo: {} //定义用户对象
}
},
//初始化的入口
created: function () {
//调用方法：获取用户信息
this.getUserInfo();
},
//方法
methods: {
//获取用户信息
getUserInfo: function () {
this.userInfo = {
userId: 1,
userName: "pan_junbiao的博客",
blogName: "您好，欢迎访问 pan_junbiao的博客",
blogUrl: "https://blog.csdn.net/pan_junbiao"
}
}
}
//使用 mount() 方法，装载应用程序实例的根组件
}).mount('#app');
</script>
</html>
