应用实例

createApp()

创建一个 Web 应用实例。

类型定义

declare function createApp(root: Component | View, config?: AppConfig): WebApp

参数

参数	类型	说明
`root`	`Component` \| `View`	根组件或视图对象
`config`	`AppConfig`	可选的应用配置

返回值

类型	说明
`WebApp`	Web 应用实例

示例

传入根组件：

tsx

import { createApp } from 'vitarx'
import { App } from './App'
const app = createApp(App)

传入视图对象：

tsx

import { createApp } from 'vitarx'
import { App } from './App'
const app = createApp(<App title="Hello" />)

参考：创建 Vitarx 应用

createSSRApp()

创建一个支持服务端渲染的应用实例。

类型定义

declare function createSSRApp(root: Component | View, config?: AppConfig): SSRApp

详情

使用方式与 createApp 完全一致，区别在于创建的应用实例支持客户端激活模式挂载。

参考：SSR 基础、SSR API

app.mount()

将应用实例挂载到容器元素中。

类型定义

declare class WebApp extends App {
  mount(container: Element | string): this
}

参数

参数	类型	说明
`container`	`Element \| string`	DOM 元素或 CSS 选择器

返回值

类型	说明
`this`	应用实例自身

详情

参数可以是一个实际的 DOM 元素或一个 CSS 选择器（使用第一个匹配到的元素）。

在 SSR 激活模式下，它将激活容器内现有的 DOM 节点。如果出现了激活不匹配，那么现有的 DOM 节点将会被修改以匹配客户端的实际渲染结果。

mount() 仅应被调用一次，但支持在 unmount() 后重新调用。

示例

app.mount('#root')
app.mount(document.body.firstChild)

app.unmount()

卸载应用实例，释放所有资源。

类型定义

declare class App {
  unmount(): void
}

详情

调用 unmount() 会释放应用占用的所有资源，包括响应式依赖、DOM 节点、事件监听器等。卸载后可以重新调用 mount() 挂载应用。

示例

const app = createApp(App).mount('#root')
app.unmount()

app.directive()

注册或获取全局指令。

类型定义

declare class App {
  directive(name: string): Directive | undefined
  directive(name: string, directive: Directive): this
}

参数

参数	类型	说明
`name`	`string`	指令名称
`directive`	`Directive`	指令对象（注册时）

返回值

调用方式	返回值	说明
只传 `name`	`Directive \| undefined`	获取已注册的指令
传 `name` + `directive`	`this`	注册指令，支持链式调用

示例

// 注册指令
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

// 获取指令
const focusDirective = app.directive('focus')

// 链式注册
app.directive('a', directiveA).directive('b', directiveB)

参考：自定义指令

app.provide()

在应用级别提供依赖。

类型定义

declare class App {
  provide(name: string | symbol, value: unknown): this
}

参数

参数	类型	说明
`name`	`string \| symbol`	依赖名称
`value`	`unknown`	依赖值

返回值

类型	说明
`this`	应用实例，支持链式调用

示例

app.provide('appName', 'MyApp')
app.provide(Symbol('theme'), 'dark')

参考：依赖注入

app.hasProvide()

检查指定名称的依赖是否已提供。

类型定义

declare class App {
  hasProvide(name: string | symbol): boolean
}

示例

app.provide('appName', 'MyApp')
app.hasProvide('appName') // true
app.hasProvide('notExist') // false

app.inject()

获取应用级别提供的依赖值。

类型定义

declare class App {
  inject<T = any>(name: string | symbol, defaultValue?: T): T
}

参数

参数	类型	说明
`name`	`string \| symbol`	依赖名称
`defaultValue`	`T`	可选的默认值

示例

app.provide('appName', 'MyApp')
app.inject('appName') // 'MyApp'
app.inject('notExist', 'default') // 'default'

app.use()

安装插件。

类型定义

declare class App {
  use<T extends {}>(plugin: AppPlugin<T>, options?: T): this
}

参数

参数	类型	说明
`plugin`	`AppPlugin<T>`	插件对象或函数
`options`	`T`	可选的插件配置

返回值

类型	说明
`this`	应用实例，支持链式调用

详情

插件可以是一个函数，或者是一个带有 install 方法的对象。如果插件是对象形式，install 方法会被绑定到该对象上下文后调用。

示例

// 函数插件
app.use(
  (app, options) => {
    console.log('插件安装', options)
  },
  { debug: true }
)

// 对象插件
app.use(
  {
    install(app, options) {
      console.log('插件安装', options)
    }
  },
  { debug: true }
)

参考：插件

app.version

获取框架版本号。

类型定义

declare class App {
  static readonly version: string
  readonly version: string
}

示例

import { App } from 'vitarx'
console.log(App.version) // 静态属性

const app = createApp(App)
console.log(app.version) // 实例属性

app.config

应用配置对象。

类型定义

declare class App {
  readonly config: Required<AppConfig>
}

类型定义：AppConfig

详情

包含应用的配置选项：

属性	类型	默认值	说明
`errorHandler`	`(error, info) => void`	控制台输出	全局错误处理器
`idPrefix`	`string`	`'v'`	元素 ID 前缀

示例

const app = createApp(App, {
  errorHandler: (error, info) => {
    console.error('应用错误:', error, info)
  },
  idPrefix: 'my-app'
})
console.log(app.config.idPrefix) // 'my-app'

app.rootView

获取应用的根视图对象。

类型定义

declare class App {
  get rootView(): View
}

类型定义：View