Vue 的应用实例

Vue通过createApp方法创建出一个「应用实例」。

  1. import { createApp } from "vue";
  2. import App from "./App.vue";
  4. const app = createApp(App);
  5. console.log(app);
  7. // ======
  9. // Vue2 通过实例化 Vue 进行创建应用实例
  10. import Vue from "vue";
  11. const app = new Vue({
  12.   // 一些配置
  13. });

app 应用实例
应用实例上有很多全局的方法，例如component方法用来注册全局组件：

  1. import { createApp } from "vue";
  2. import App from "./App.vue";
  3. import TodoList from "./components/TodoList.vue";
  5. const app = createApp(App);
  6. // 注册全局组件
  7. app.component("TodoList", TodoList);
  8. app.mount("#app");
  1. <template>
  2.   <!-- 进行使用 -->
  3.   <TodoList />
  4. </template>

app应用实例对象上的方法大多数时候返回的是**app**实例，所以你可以进行链式调用：

  1. // 其他代码
  3. const app = createApp(App);
  4. const app2 = app.component("TodoList", TodoList);
  5. app2.mount("#app");
  7. console.log(app === app2); // true

根组件和根元素

「根组件」的本质就是一个对象{}，createApp执行的时候需要传递一个根组件，所以必须给createApp提供一个对象。
根组件是Vue渲染的起点，这就好比HTML文档的html标签，必须要有一个根标签。

  1. import { createApp } from "vue";
  2. import App from "./App.vue";
  4. // 使用 mount 方法进行渲染挂载
  5. const app = createApp(App).mount("#app");

「根元素」是一个HTML的元素，createApp执行创建Vue应用实例时需要一个html的根元素进行挂载渲染，这就是mount方法的作用。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Vite + Vue</title>
  8.   </head>
  9.   <body>
  10.     <!-- Vue 将从 #app 进行渲染挂载。当然你也可以把 id 更改为其他的什么东西，只需要保证 mount 能获取到对应的 DOM 节点即可 -->
  11.     <div id="app"></div>
  12.     <script type="module" src="/src/main.js"></script>
  13.   </body>
  14. </html>

:::info **mount**方法执行后返回的是「根组件」实例，并不是「应用实例」，也就是App组件实例。这一点和app应用实例对象上其他方法有所不同！！！ :::

  1. // 其他代码
  2. const app = createApp(App);
  3. const vm = app.mount("#app");
  5. console.log(vm);
  1. <template>
  2.   <span>{{ msg }}</span>
  3. </template>
  5. <script>
  6.   export default {
  7.     data() {
  8.       return {
  9.         msg: "Hello Word",
  10.       };
  11.     },
  12.   };
  13. </script>

WX20221229-155102.png
从图中我们可以看到data中的msg属性也被添加到了根组件的实例上！

有的同学可能会经常看到vm这个变量，其实vm是ViewModel的简称，来源于MVVM模式，Vue其实并不是一个完整的MVVM的模型，只是参考了MVVM模型。

组件实例

每个组件都有自己的组件实例，一个应用中所有的组件的共享一个应用实例，也就是app应用实例对象！
无论是根组件还是应用内其他组件，配置项、组件的行为（方法、生命周期等）都是一样的。

  1. // 一个组件基本的配置
  2. const component = {
  3.   template: "<span>{{ msg }}</span>",
  4.   data() {
  5.     return {
  6.       msg: "Hello Word",
  7.     };
  8.   }
  9. }

组件还可以配置props、components、methods…的选项，这种方式就是Vue2中的OptionsAPI选项API。
在组件中可以通过this.$attrs、this.$emit调用Vue组件内置的方法。

  1. const component = {
  2.   template: "<span @click='handleClick'>{{ msg }}</span>",
  3.   data() {
  4.     return {
  5.       msg: "Hello Word",
  6.     };
  7.   },
  8.   methods:{
  9.     handleClick(){
  10.       this.$emit("change", new Date());
  11.     }
  12.   }
  13. }

组件的生命周期

组件是有一个初始化过程的，在这过程中，Vue提供了很多每个阶段运行的函数，这就是生命周期函数。生命周期函数会在对应的阶段自动执行。
image.png

  1. export default {
  2.   data() {
  3.     return {};
  4.   },
  5.   /**
  6.    * 初始化事件、生命周期
  7.    *  */
  8.   // 创建组件之前
  9.   beforeCreate() {},
  10.   /**
  11.    * 初始化注入、响应式
  12.    *  */
  13.   // 组件创建完成
  14.   created() {},
  15.   /**
  16.    * 是否有 template?
  17.    * yes：生成 AST 数据树 => 生成虚拟 DOM => 编译模版到渲染函数
  18.    * no：编译 el 的 innerHTML 到模版
  19.    * */
  20.   // 挂载之前
  21.   beforeMount() {},
  22.   /**
  23.    * 创建 app.$el,并添加到 el
  24.    *  */
  25.   // 挂载完成
  26.   mounted() {},
  27.   // 数据更新之前
  28.   beforeUpdate() {},
  29.   /**
  30.    * 虚拟 DOM 重写渲染和更新
  31.    */
  32.   // 数据已更新
  33.   updated() {},
  34.   // 组件销毁之前
  35.   beforeUnmount() {},
  36.   // 组件已销毁
  37.   beforeMount() {},
  38. };