Vue 应用实例、根组件实例与组件实例

站长

2022年12月30日 22:47 · 阅读数 20

大家好啊，马上又是新的一年了，不知道大家今年很什么新鲜事、这一年成长了多少，小谢在这里提前给大家拜个早年，祝大家发发发、都能找到对象 😂

Vue 的应用实例

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

// main.js
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
console.log(app);

// Vue2 通过实例化 Vue 进行创建应用实例
import Vue from "vue";
const app = new Vue({
  // 一些配置
});

Vue 应用实例、根组件实例与组件实例

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

// mian.js
import { createApp } from "vue";
import App from "./App.vue";
import TodoList from "./components/TodoList.vue";

const app = createApp(App);
// 注册全局组件
app.component("TodoList", TodoList);
app.mount("#app");

<template>
  <!-- 进行使用 -->
  <TodoList />
</template>

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

// main.js

// 其他代码
const app = createApp(App);
const app2 = app.component("TodoList", TodoList);
app2.mount("#app");

console.log(app === app2); // true

根组件和根元素

「根组件」的本质就是一个对象{}，createApp执行的时候需要传递一个根组件，所以必须给createApp提供一个对象。

根组件是Vue渲染的起点，这就好比HTML文档的html标签，必须要有一个根标签。

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

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

// main.js
import { createApp } from "vue";
import App from "./App.vue";

// 使用 mount 方法进行渲染挂载
const app = createApp(App).mount("#app");

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

// main.js

// 其他代码
const app = createApp(App);
const vm = app.mount("#app");

console.log(vm);

<template>
  <span>{{ msg }}</span>
</template>

<script>
  export default {
    data() {
      return {
        msg: "Hello Word",
      };
    },
  };
</script>

Vue 应用实例、根组件实例与组件实例

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

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

组件实例

每个组件都有自己的组件实例，一个应用中所有的组件的共享一个应用实例，也就说app应用实例对象！

无论是根组件还是应用内其他组件，配置项、组件的行为（方法、生命周期等）都是一样的。

// 一个组件基本的配置
const component = {
  template: "<span>{{ msg }}</span>",
  data() {
    return {
      msg: "Hello Word",
    };
  }
}

组件还可以配置props、components、methods...的选项，这种方式就是Vue2中的OptionsAPI选项API。

在组件中可以通过this.$attrs、this.$emit调用Vue组件内置的方法。

const component = {
  template: "<span @click='handleClick'>{{ msg }}</span>",
  data() {
    return {
      msg: "Hello Word",
    };
  },
  methods:{
    handleClick(){
      this.$emit("change", new Date());
    }
  }
}

组件的生命周期

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

Vue 应用实例、根组件实例与组件实例

export default {
  data() {
    return {};
  },
  /**
   * 初始化事件、生命周期
   *  */
  // 创建组件之前
  beforeCreate() {},
  /**
   * 初始化注入、响应式
   *  */
  // 组件创建完成
  created() {},
  /**
   * 是否有 template?
   * yes：生成 AST 数据树 => 生成虚拟 DOM => 编译模版到渲染函数
   * no：编译 el 的 innerHTML 到模版
   * */
  // 挂载之前
  beforeMount() {},
  /**
   * 创建 app.$el,并添加到 el
   *  */
  // 挂载完成
  mounted() {},
  // 数据更新之前
  beforeUpdate() {},
  /**
   * 虚拟 DOM 重写渲染和更新
   */
  // 数据已更新
  updated() {},
  // 组件销毁之前
  beforeUnmount() {},
  // 组件已销毁
  beforeMount() {},
};

最后

文章首发于《3、应用实例、根组件实例与组件实例》

欢迎大家评论留言👏👏👏