跳到主要内容

API✅

Vue 的 app 实例支持哪些方法和配置​

答案

app 实例通过 createApp() 创建，ssr 端通过 createSSRApp() 创建，除了组件内置的生命周期钩子外，app 实例还支持以下方法和配置

方法/配置说明
app.component(name, component)注册全局组件
app.provide()提供一个全局的状态给，比如主题信息等
app.directive(name, directive)注册全局指令
app.mixin(mixin)注册全局混入, 注入内容会在所有组件上存在, 注意不属于组件的配置会在 $options 上挂载
app.use()在 app 上注册一个插件，例如打点、鉴权等功能
app.mount(rootConainer)挂载 app 组件到 rootConainer
app.unmount()卸载 app 组件
app.onUnmount()卸载 app 组件时的钩子函数
app.runWithContext()3.3+ 用来在非组件的场景下注入 provide 提供的信息
app.versionVue 版本号, 一般用在插件中通过判断版本来处理不同逻辑，也可以直接通过 import { version } from 'vue' 获取版本
app.configVue 的配置信息
app.config.errorHandler捕获组件错误，注意没有被组件级别捕获的异步错误会被 errorHandler 兜底
app.config.warnHandler捕获组件告警
app.config.performance捕获组件性能在 devtools 可查看
app.config.compilerOptions用于控制运行时编译的配置，如果采用构建工具需要通过插件配置，典型的编译配置如下
app.config.compilerOptions.isCustomElement用于让 Vue 忽略自定义的元素避免 Vue 编译，主要用在 WebComponents 场景
app.config.compilerOptions.whitespace设置空格的处理策略
app.config.compilerOptions.delimiters控制模版语法默认为 ['{{', '}}'] , 你也可以修改为 ['${', '}']
app.config.compilerOptions.comments是否删除模版中的注解，默认生产会删除，你也可以通过配置 ture 阻止该行为
app.config.globalProperties会往组件上直接挂载新的属性，所有组件都会继承
app.config.optionMergeStrategies用来控制 mixin 组件和全局出现重名时的合并策略
app.config.idPrefix配置 useId hook 是否添加前缀
app.config.throwUnhandledErrorInProduction3.5+ 控制内部异常在生产环境是否抛出，默认不抛出

延伸到阅读

有使用过 Vue 插件么，说下使用场景？​

答案

Vue 插件 实现了对 Vue 实例的扩展，通过 app.use(plugin) 方式注入插件，插件可以是一个函数也可以是一个带有 install 方法的对象。

export type ObjectPlugin<Options = any[]> = {
  install: PluginInstallFunction<Options>
}
export type FunctionPlugin<Options = any[]> = PluginInstallFunction<Options> &
  Partial<ObjectPlugin<Options>>

export type Plugin<
  Options = any[],
  // TODO: in next major Options extends unknown[] and remove P
  P extends unknown[] = Options extends unknown[] ? Options : [Options],
> = FunctionPlugin<P> | ObjectPlugin<P>

interface App {
  use(plugin: Plugin, ...options: any[]): this
}

插件的典型使用场景包括

  1. 全局资源注册，比如全局挂载的组件、指令 element-plus 全局挂载组件
  2. 全局注入服务，比如globalProperties等，典型示例 ant design vue 全局挂载组件和属性，vue i18n 等

示例说明

<script src="https://unpkg.com/vue@3"></script>
<div id="app">
   <p>{{ message }}</p>
   <button @click="sayHello">Say Hello</button>
</div>
<script>
// 定义一个最简单的 Vue 插件
const MyPlugin = {
   install(app, options) {
      // 添加全局方法
      app.config.globalProperties.$hello = function() {
         alert('Hello from plugin!');
      };
   }
};

const { createApp } = Vue;
const app = createApp({
   data() {
      return {
         message: 'Vue Plugin 示例'
      };
   },
   methods: {
      sayHello() {
         this.$hello();
      }
   }
});

// 使用插件
app.use(MyPlugin);

app.mount('#app');
</script>
Open on CodeSandboxOpen Sandbox

延伸阅读

  • Vue 插件 官方文档说明 Vue 插件的使用场景

说一下 nextTick 的使用场景？​

答案

nextTick 用于在 DOM 更新完成后执行回调。比如获取最新的元素尺寸、操作子组件等。

使用方式包括

  • 在选项式 API 中：this.$nextTick(() => { /* 操作 DOM */ })
  • 在组合式 API 或全局：import { nextTick } from 'vue'; await nextTick();， 也可以直接用 Promise：nextTick().then(() => { /* 操作 DOM */ })

参考示例

this.message = '新内容'
this.$nextTick(() => {
  // 此时 DOM 已更新，可以安全访问
  console.log(this.$refs.myElement.textContent)
})

有使用过哪些 Vue 内置的组合式 API？​

答案
组合式 API说明
useAttrs()访问父组件传递的 attrs
useSlots()访问父组件传递的 slots
useModel()defineModel 的底层函数，一般业务侧不会消费, 详见 useModel
useTemplateRef()3.5+ 中添加，获取模版中定义了 ref 的元素，注意返回的 ref 引用只有在 onMounted 组件挂载后才能访问到 DOM
useId()3.5+ 中添加，用于为无障碍属性或表单元素生成每个应用内唯一的 ID, 可以结合 app.config.idPrefix 配置生成的 id 前缀

延伸阅读

vue 如何配置全局使用的定义或者常量​

答案
  1. app.provide 提供一个全局的数据，如果在非组件中消费可以使用 app.runWithContext 来获取注入的状态
  2. 定义一个 Vue 插件，通过 app.config.globalProperties 来挂载一个全局的属性，通常采用 $ 前缀来引用
  3. 通过 Vue.mixin 来注入，不推荐，优先考虑 2
  4. 通过全局状态管理比如 pinia、vuex， 或者内部采用 effectScope 来实现
  5. 定义一个全局的 global.js 文件，来定义一些常量和方法
22%