学习 Vue3 中的两种实例

在学习过程中 vue3 的多种实例，我们还没有认真的将在 vue3 中的实例进行一个总结，我觉得现在大家有了比较多 vue3 的基础以后，我们就可以开始归纳总结一下，看看在 vue3 中都有哪些总类的实例。

先从文档看起，从 vue2 看起，它非常简单。

Vue2

• 每个 Vue 应用都是 new Vue 函数创建的一个新的实例
• 创建的时候将 data 作为 property 添加到响应式系统中
• https://cn.vuejs.org/v2/guide/instance.html

Vue3 - Application Instance

• createApp 创建一个 Application Instance
• 应用实例用来注册应用中的全局内容
• 大多数方法支持链式调用，返回应用实例
• https://v3.vuejs.org/guide/instance.html
• createApp 传递的那个组件，称之为 root component

const app = createApp(App) app.use().use() 

Vue3 - Component Instance

刚才我们说 应用实例上的大部分方法都返回应用实例本身， 当然这里面是有例外的，比如 mount 方法，

• mount 方法用来：
  • 将 应用实例 挂载到 DOM 节点上
  • 返回的不是应用实例，而是组件实例（和 Vue2 那个一样）

const vm = app.mount('#app') console.log(vm) 

• 关于 组件实例
  • 组件中的所有属性 (methods,props,computed,setup …) 都会在实例上平铺展示
  • 还有一系列内置或者全局的属性，比如内置的 $attrs, $refs, 全局的 $message, $confirm
• 各种属性解释 请看文档 https://v3.vuejs.org/api/instance-properties.html
• 通过 ref 拿到的子组件实例属于组件实例

这就是 Vue3 中组件的两大类型。