![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/8c329b26103447728fecae5a8bc04875.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
在第一章的文章中，大致上都了解了vue的一些指令和使用方法，在第二章正式开始学习之前，应该让大家更深的了解一下vue应用的基础概念，让大家不仅要会写vue代码，还要知道其中的概念，这样就可以更好的理解之后的内容了。
createApp()
在之前的文章中，我们一直用到的代码都是这样写的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello World</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp(); app.mount('#root'); </script> </html> 复制代码
在这段代码中，Vue后面会调用一个createApp的方法，createApp方法的字面意思就是创建一个应用，app就是application的缩写。createApp实际意思就是创建一个vue的应用，而这个应用要通过mount方法挂载到root节点上，而这个应用只作用于id = root的元素节点上。如果body中还有其他根元素，mount方法会对它视而不见，只对root节点有用。
<script> const app = Vue.createApp({ data(){ return { message: 'Hello World' } }, template: "<div>{{message}}</div>" }); app.mount('#root'); </script> 复制代码
在这段代码中，可以看到createApp方法中传入的是一个对象，在第一章中，我们了解到了一个网页都是有一个又一个的组件组成的，而createApp里面的对象就表示这个应用最外层的组件应该如何展示。
在最外层的组件中，我们传入了data方法用于展示数据，传入template模板用于展
示DOM元素，所以在打开页面的时候，就会第一时间看到这个最外层的组件了。
![3SPWFKA3X{5_]24$1]~[}}G.png](https://ucc.alicdn.com/pic/developer-ecology/56bae89da8f0482b8ed686c01d56a845.png?x-oss-process=image/resize,w_1400/format,webp "3SPWFKA3X{5_]24$1]~[}}G.png")
根组件
在上面的内容中，我们创建一个Vue应用之后，存储到了app变量中，如果我们想要获取这个应用中对应的根组件，应该怎么获取呢？
- 调用
app.mount()方法的时候，方法返回的结果就是根组件
下面我们就来详细介绍一个这个根组件
const vm = app.mount('#root'); 复制代码
- 我们将
mount方法返回值给到vm之后，vm就代表vue应用中的根组件
当我们理解了vue的应用和根组件之后，应该会发现在获取根组件的时候，用的是vm去定义的，那这个vm的意义是什么呢？
在之前的内容中，我们也学习过，vue是一个面向数据编程的，在代码中，我们定义了数据message，也定义了模板template，那么vue就会自动的把模板和数据关联起来，变成我们想要展示的一个页面效果。
vue面向数据编程的模式就是参考了MVVM设计模式，那什么是MVVM设计模式呢？可以结合上面的代码来理解一下MVVM
M：model - 数据 ---->message: 'Hello World'
V：view - 视图 ---->{{message}}
VM：viewModel - 视图数据连接层 ---->app.mount('#root');
所以我们会用vm去定义根组件，它表示的就是视图连接层，也是vue里面一个又一个的组件。
全局使用
在上面的代码中，我们定义了app和vm，那么我们应该怎么用这两个参数呢？这两个参数里面返回的数据有啥用呢？ 下面我们就可以打开浏览器控制台，一起去看看这俩玩意儿到底能干点啥。
app和vm都是定义的全局常量，所以可以在浏览器中直接输出 由于数据和视图的绑定，或者说是关联关系是通过vm来维护的，那么我们就可以借助vm来对数据和视图做些操作了。
![B_]OXDP3Z]XSP{X3_DPG`9J.png](https://ucc.alicdn.com/pic/developer-ecology/cc7c67d75b174b56ae85825be94945d8.png?x-oss-process=image/resize,w_1400/format,webp "B_]OXDP3Z]XSP{X3_DPG`9J.png")
在浏览器控制台中，我们可以用vm.$data的方式获取到对应的根组件上的一些数据内容，也就是data里面定义的数据，我们的data数据里面定义了message，所以可以通过vm.$data.message去操作message，使数据和视图都发生改变。
总结
Vue.createApp()创建一个vue的应用，传递进去的参数表示这个应用的根组件应该如何去创建。
mount()返回的是vue应用对应的根组件，这个根组件充当了vm这个角色。
vm.$data修改数据，使数据和视图都发生改变之后，页面重新渲染
