聊聊Vue3中的依賴注入與元件定義
- 青灯夜游轉載
- 2023-03-21 18:46:371753瀏覽
本次主要分享Vue3中依賴注入以及元件定義相關的幾個API，以及在常用函式庫ElementUI Plus和Vueuse中的使用情況，透過範例來理解使用場景。
讓我們聊聊 Vue 3中依賴注入與元件定義相關的那點事兒。
provide() & inject()
#provide()
提供一個值，可以被後代元件注入。
function provide<T>(key: InjectionKey<T> | string, value: T): void
接收兩個參數：
- ##要注入的
- key
#，字串或Symbol;
export interface InjectionKey<T> extends Symbol {}
- 對應注入的值
API 類似，provide() 必須在元件的 setup() 階段同步呼叫。 【相關推薦：vuejs影片教學、web前端開發】
#inject()
注入一個由祖先元件或整個應用(透過app.provide()) 提供的值。
// 没有默认值 function inject<T>(key: InjectionKey<T> | string): T | undefined // 带有默认值 function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T // 使用工厂函数 function inject<T>( key: InjectionKey<T> | string, defaultValue: () => T, treatDefaultAsFactory: true ): T
- 第一個參數是注入的
key
。Vue會遍歷父元件鏈，透過符合key來決定所提供的值。如果父元件鏈上多個元件對同一個key提供了值，那麼離得更近的元件將會「覆蓋」鏈上更遠的元件所提供的值。如果沒有能透過key來匹配到值，inject()將傳回undefined，除非提供了一個預設值。 - 第二個參數是可選的，也就是在沒有符合到
key
時使用的預設值。它也可以是一個工廠函數，用來傳回某些創建起來比較複雜的值。如果預設值本身就是一個函數，那麼你必須將false作為第三個參數傳入，表示這個函數就是預設值，而不是一個工廠函數。
provide() & inject() - 官方範例// provide
<script setup>
import {(ref, provide)} from 'vue' import {fooSymbol} from
'./injectionSymbols' // 提供静态值 provide('foo', 'bar') // 提供响应式的值
const count = ref(0) provide('count', count) // 提供时将 Symbol 作为 key
provide(fooSymbol, count)
</script>// inject
<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'
// 注入值的默认方式
const foo = inject('foo')
// 注入响应式的值
const count = inject('count')
// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)
// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')
// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())
// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)
</script>
provide() & inject() - ElementUI Plus 範例Breadcrumb 元件<script setup>
import { onMounted, provide, ref } from 'vue'
import { useNamespace } from '@element-plus/hooks'
import { breadcrumbKey } from './constants'
import { breadcrumbProps } from './breadcrumb'
defineOptions({
name: 'ElBreadcrumb',
})
const props = defineProps(breadcrumbProps)
const ns = useNamespace('breadcrumb')
const breadcrumb = ref<HTMLDivElement>()
// 提供值
provide(breadcrumbKey, props)
onMounted(() => {
......
})
</script><script setup>
import { getCurrentInstance, inject, ref, toRefs } from 'vue'
import ElIcon from '@element-plus/components/icon'
import { useNamespace } from '@element-plus/hooks'
import { breadcrumbKey } from './constants'
import { breadcrumbItemProps } from './breadcrumb-item'
import type { Router } from 'vue-router'
defineOptions({
name: 'ElBreadcrumbItem',
})
const props = defineProps(breadcrumbItemProps)
const instance = getCurrentInstance()!
// 注入值
const breadcrumbContext = inject(breadcrumbKey, undefined)!
const ns = useNamespace('breadcrumb')
......
</script>
provide() & inject() - VueUse 範例
createInjectionState 原始碼 / createInjectionState 使用
package/core/computedInject 原始碼
import { type InjectionKey, inject, provide } from 'vue-demi'
/**
* 创建可以注入到组件中的全局状态
*/
export function createInjectionState<Arguments extends Array<any>, Return>(
composable: (...args: Arguments) => Return
): readonly [
useProvidingState: (...args: Arguments) => Return,
useInjectedState: () => Return | undefined
] {
const key: string | InjectionKey<Return> = Symbol('InjectionState')
const useProvidingState = (...args: Arguments) => {
const state = composable(...args)
provide(key, state)
return state
}
const useInjectedState = () => inject(key)
return [useProvidingState, useInjectedState]
}
nextTick()
#等待下次DOM 更新刷新的工具方法。function nextTick(callback?: () => void): Promise<void>說明：當你在
Vue 中更改響應式狀態時，最終的DOM 更新並不是同步生效的，而是由Vue 將它們快取在一個佇列中，直到下一個「tick」才一起執行。這樣是為了確保每個元件無論發生多少狀態改變，都只執行一次更新。
nextTick() 可以在狀態改變後立即使用，以等待 DOM 更新完成。你可以傳遞一個回呼函數作為參數，或是 await 傳回的 Promise。
nextTick() 官網範例<script setup>
import { ref, nextTick } from 'vue'
const count = ref(0)
async function increment() {
count.value++
// DOM 还未更新
console.log(document.getElementById('counter').textContent) // 0
await nextTick()
// DOM 此时已经更新
console.log(document.getElementById('counter').textContent) // 1
}
</script>
<template>
<button id="counter" @click="increment">{{ count }}</button>
</template>
nextTick() - ElementUI Plus 範例
export default defineComponent({
......
const syncMenuState = (
newCheckedNodes: CascaderNode[],
reserveExpandingState = true
) => {
......
checkedNodes.value = newNodes
nextTick(scrollToExpandingNode)
}
const scrollToExpandingNode = () => {
if (!isClient) return
menuList.value.forEach((menu) => {
const menuElement = menu?.$el
if (menuElement) {
const container = menuElement.querySelector(`.${ns.namespace.value}-scrollbar__wrap`)
const activeNode = menuElement.querySelector(`.${ns.b('node')}.${ns.is('active')}`) ||
menuElement.querySelector(`.${ns.b('node')}.in-active-path`)
scrollIntoView(container, activeNode)
}
})
}
......
})
nextTick() - VueUse 範例
export function useInfiniteScroll(
element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>
......
) {
const state = reactive(......)
watch(
() => state.arrivedState[direction],
async (v) => {
if (v) {
const elem = resolveUnref(element) as Element
......
if (options.preserveScrollPosition && elem) {
nextTick(() => {
elem.scrollTo({
top: elem.scrollHeight - previous.height,
left: elem.scrollWidth - previous.width,
})
})
}
}
}
)
}
使用场景：
当你需要在修改了某些数据后立即对
DOM进行操作时，可以使用nextTick来确保DOM已经更新完毕。例如，在使用$ref获取元素时，需要确保元素已经被渲染才能够正确获取。在一些复杂页面中，有些组件可能会因为条件渲染或动态数据而频繁地变化。使用
nextTick可以避免频繁地进行DOM操作，从而提高应用程序的性能。当需要在模板中访问某些计算属性或者监听器中的值时，也可以使用
nextTick来确保这些值已经更新完毕。这样可以避免在视图中访问到旧值。
总之，nextTick 是一个非常有用的 API，可以确保在正确的时机对 DOM 进行操作，避免出现一些不必要的问题，并且可以提高应用程序的性能。
defineComponent()
在定义 Vue 组件时提供类型推导的辅助函数。
function defineComponent( component: ComponentOptions | ComponentOptions['setup'] ): ComponentConstructor
第一个参数是一个组件选项对象。返回值将是该选项对象本身，因为该函数实际上在运行时没有任何操作，仅用于提供类型推导。
注意返回值的类型有一点特别：它会是一个构造函数类型，它的实例类型是根据选项推断出的组件实例类型。这是为了能让该返回值在 TSX 中用作标签时提供类型推导支持。
const Foo = defineComponent(/* ... */) // 提取出一个组件的实例类型 (与其选项中的 this 的类型等价) type FooInstance = InstanceType<typeof Foo>
参考：Vue3 - defineComponent 解决了什么？
defineComponent() - ElementUI Plus 示例
import { defineComponent, renderSlot, watch } from 'vue'
import { provideGlobalConfig } from './hooks/use-global-config'
import { configProviderProps } from './config-provider-props'
......
const ConfigProvider = defineComponent({
name: 'ElConfigProvider',
props: configProviderProps,
setup(props, { slots }) {
......
},
})
export type ConfigProviderInstance = InstanceType<typeof ConfigProvider>
export default ConfigProviderdefineComponent() - Treeshaking
因为 defineComponent() 是一个函数调用，所以它可能被某些构建工具认为会产生副作用，如 webpack。即使一个组件从未被使用，也有可能不被 tree-shake。
为了告诉 webpack 这个函数调用可以被安全地 tree-shake，我们可以在函数调用之前添加一个 /_#**PURE**_/ 形式的注释：
export default /*#__PURE__*/ defineComponent(/* ... */)
请注意，如果你的项目中使用的是 Vite，就不需要这么做，因为 Rollup (Vite 底层使用的生产环境打包工具) 可以智能地确定 defineComponent() 实际上并没有副作用，所以无需手动注释。
defineComponent() - VueUse 示例
import { defineComponent, h, ref } from 'vue-demi'
import { onClickOutside } from '@vueuse/core'
import type { RenderableComponent } from '../types'
import type { OnClickOutsideOptions } from '.'
export interface OnClickOutsideProps extends RenderableComponent {
options?: OnClickOutsideOptions
}
export const OnClickOutside = /* #__PURE__ */ defineComponent<OnClickOutsideProps>({
name: 'OnClickOutside',
props: ['as', 'options'] as unknown as undefined,
emits: ['trigger'],
setup(props, { slots, emit }) {
... ...
return () => {
if (slots.default)
return h(props.as || 'div', { ref: target }, slots.default())
}
},
})defineAsyncComponent()
定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。
function defineAsyncComponent(
source: AsyncComponentLoader | AsyncComponentOptions
): Component
type AsyncComponentLoader = () => Promise<Component>
interface AsyncComponentOptions {
loader: AsyncComponentLoader
loadingComponent?: Component
errorComponent?: Component
delay?: number
timeout?: number
suspensible?: boolean
onError?: (
error: Error,
retry: () => void,
fail: () => void,
attempts: number
) => any
}defineAsyncComponent() - 官网示例
<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
resolve(/* 从服务器获取到的组件 */)
})
})
const AdminPage = defineAsyncComponent(() =>
import('./components/AdminPageComponent.vue')
)
</script>
<template>
<AsyncComp />
<AdminPage />
</template>ES 模块动态导入也会返回一个 Promise，所以多数情况下我们会将它和 defineAsyncComponent 搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)，因此我们也可以用它来导入 Vue 单文件组件。
defineAsyncComponent() - VitePress 示例
<script setup>
import { defineAsyncComponent } from 'vue'
import type { DefaultTheme } from 'vitepress/theme'
defineProps<{ carbonAds: DefaultTheme.CarbonAdsOptions }>()
const VPCarbonAds = __CARBON__
? defineAsyncComponent(() => import('./VPCarbonAds.vue'))
: () => null
</script>
<template>
<div>
<VPCarbonAds :carbon-ads="carbonAds" />
</div>
</template>defineAsyncComponent()使用场景：
当你需要异步加载某些组件时，可以使用
defineAsyncComponent来进行组件懒加载，这样可以提高应用程序的性能。在一些复杂页面中，有些组件可能只有在用户执行特定操作或进入特定页面时才会被使用到。使用
defineAsyncComponent可以降低初始页面加载时的资源开销。当你需要动态地加载某些组件时，也可以使用
defineAsyncComponent。例如，在路由中根据不同的路径加载不同的组件。
除 Vue3 之外，许多基于 Vue 3 的库和框架也开始使用 defineAsyncComponent 来实现组件的异步加载。例如：
-
VitePress:
Vite的官方文档工具，使用defineAsyncComponent来实现文档页面的异步加载。 -
Nuxt.js: 基于 Vue.js 的静态网站生成器，从版本 2.15 开始支持
defineAsyncComponent。 -
Quasar Framework: 基于
Vue.js的 UI 框架，从版本 2.0 开始支持defineAsyncComponent。 -
Element UI Plus: 基于
Vue 3的 UI 库，使用defineAsyncComponent来实现组件的异步加载。
总之，随着 Vue 3 的普及，越来越多的库和框架都开始使用 defineAsyncComponent 来提高应用程序的性能。
defineCustomElement()
这个方法和 defineComponent 接受的参数相同，不同的是会返回一个原生自定义元素类的构造器。
function defineCustomElement(
component:
| (ComponentOptions & { styles?: string[] })
| ComponentOptions['setup']
): {
new (props?: object): HTMLElement
}除了常规的组件选项，defineCustomElement() 还支持一个特别的选项 styles，它应该是一个内联 CSS 字符串的数组，所提供的 CSS 会被注入到该元素的 shadow root 上。
返回值是一个可以通过 customElements.define() 注册的自定义元素构造器。
import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
/* 组件选项 */
})
// 注册自定义元素
customElements.define('my-vue-element', MyVueElement)使用 Vue 构建自定义元素
import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
// 这里是同平常一样的 Vue 组件选项
props: {},
emits: {},
template: `...`,
// defineCustomElement 特有的：注入进 shadow root 的 CSS
styles: [`/* inlined css */`],
})
// 注册自定义元素
// 注册之后，所有此页面中的 `<my-vue-element>` 标签
// 都会被升级
customElements.define('my-vue-element', MyVueElement)
// 你也可以编程式地实例化元素：
// （必须在注册之后）
document.body.appendChild(
new MyVueElement({
// 初始化 props（可选）
})
)
// 组件使用
<my-vue-element></my-vue-element>除了 Vue 3 之外，一些基于 Vue 3 的库和框架也开始使用 defineCustomElement 来将 Vue 组件打包成自定义元素供其他框架或纯 HTML 页面使用。例如：
-
Ionic Framework: 基于
Web Components的移动端 UI 框架，从版本 6 开始支持使用defineCustomElement将Ionic组件打包成自定义元素。 -
LitElement: Google 推出的
Web Components库，提供类似Vue的模板语法，并支持使用defineCustomElement将LitElement组件打包成自定义元素。 -
Stencil: 由
Ionic Team开发的Web Components工具链，可以将任何框架的组件转换为自定义元素，并支持使用defineCustomElement直接将Vue组件打包成自定义元素。
总之，随着 Web Components 的不断流行和发展，越来越多的库和框架都开始使用 defineCustomElement 来实现跨框架、跨平台的组件共享。
小结
本次我们围绕着 Vue3 中的依赖注入与组件定义相关的几个 API，学习其基本使用方法，并且结合着目前流行的库和框架分析了使用场景，以此来加深我们对它们的认识。
内容收录于github 仓库
以上是聊聊Vue3中的依賴注入與元件定義的詳細內容。更多資訊請關注PHP中文網其他相關文章！