VUE3照本宣科——应用实例API与setup

VUE3照本宣科——应用实例API与setup

  • 前言
  • 一、应用实例API
    • 1.createApp()
    • 2.app.use()
    • 3.app.mount()
  • 二、setup


前言

‍‍记录学习成果,以便温故而知新

“VUE3照本宣科”是指照着中文官网和菜鸟教程这两个“本”来学习一下VUE3。以前也学过VUE2,当时只再gitee留下一些代码,却没有记录学习的心得体会,有时也免不了会追忆一下。

以后出现“中文官网”不做特殊说明就是指:https://cn.vuejs.org/;菜鸟教程就是指:https://www.runoob.com/vue3/vue3-tutorial.html


一、应用实例API

中文文档中应用实例API 有很多,本文选择前文所述的“zbxk”项目中默认代码中出现的API介绍。

前文讲过“index.html”是前端应用的入口,
VUE3照本宣科——应用实例API与setup_第1张图片首先能看到的是一个ID为app的div,这是SPA渲染的根;然后看到的是引入了src目录下的“main.js”。
接着看main.js,如图:
VUE3照本宣科——应用实例API与setup_第2张图片
从截图中可以看到createApp() 、app.use() 及app.mount() 3个应用实例API,中文文档实际上有一堆的应用实例API,但是zbxk项目中没有出现,所以不做介绍。有需要深入了解的请参看应用实例 API 。

1.createApp()

功能是创建一个应用实例。

function createApp(rootComponent: Component, rootProps?: object): App
第一个参数是根组件。第二个参数可选,它是要传递给根组件的 props。

项目中的代码:

const app = createApp(App)

是用组件App创建应用app,而组件App是整个项目的父组件

2.app.use()

功能是安装一个插件。

interface App {
use(plugin: Plugin, …options: any[]): this
}
第一个参数应是插件本身,可选的第二个参数是要传递给插件的选项。
插件可以是一个带 install() 方法的对象,亦或直接是一个将被用作 install() 方法的函数。插件选项 (app.use() 的第二个参数) 将会传递给插件的 install() 方法。
若 app.use() 对同一个插件多次调用,该插件只会被安装一次。

项目中的代码:

app.use(createPinia())
app.use(router)

安装了2个插件,分别是状态管理器与路由。

3.app.mount()

功能是将应用实例挂载在一个容器元素中。

参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)。返回根组件的实例。
如果该组件有模板或定义了渲染函数,它将替换容器内所有现存的 DOM 节点。否则在运行时编译器可用的情况下,容器元素的 innerHTML 将被用作模板。
对于每个应用实例,mount() 仅能调用一次。

项目中的代码:

app.mount('#app')

是把新建的实例app挂载到ID为app的div上。有时也会说成渲染到ID为app的div上,所表达的是一个意思。

二、setup

setup() 钩子是在组件中使用组合式 API 的入口,通常只在以下情况下使用:

1.需要在非单文件组件中使用组合式 API 时。
2.需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

对于结合单文件组件使用的组合式 API,推荐通过

你可能感兴趣的:(VUE,Vue,前端,开发语言)