• Vue3 学习笔记 —— Hooks、全局函数和变量、Vue3 插件

    目录

    1. Hooks

    1.1 Vue2 中的 mixins

    1.1.1 mixins 是什么？

    1.1.2 mixins 缺点？

    1.2 Vue3 中的 Hooks

    1.2.1 Vue3 Hooks 是什么？

    1.2.2 Vue3 内置 hooks 举例

    1.2.3 自定义 Hooks

    2. 全局函数和全局变量

    2.1 app.config.globalProperties

    2.2 过滤器还在吗？如何使用全局变量？

    2.3 createApp()、proxy 源码分析

    3. Vue3 插件

    3.1 什么是插件？怎么使用插件？

    3.2 编写 Vue3 插件（实现 Loading 效果）

    3.2.1 添加 Loading 插件页面（loading.vue）

    3.2.2 编写 Loading 插件 ts 逻辑（loading.ts）

    3.2.3 在 main.ts 中全局注册 Loading  插件

    3.2.4 在 .vue 中使用 Loading 插件

    3.3 Vue3 中的 app.use() 方法

    3.3.1 手写一个 app.use()

    3.3.2 app.use() 源码分析

    1. Hooks

    小满Vue3（第二十八章 自定义Hooks）_哔哩哔哩_bilibili小满Vue3（第二十八章 自定义Hooks）是Vue3 + vite + Ts + pinia + 实战 + 源码 +electron的第39集视频，该合集共计110集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV1dS4y1y7vd?p=39&vd_source=8bc01635b95dbe8ecd349b2c23b03a10

    1.1 Vue2 中的 mixins

    1.1.1 mixins 是什么？

    将多个组件 相同逻辑 抽离出来，各个组件引入 mixins 进行复用

    mixins 的生命周期调用，先于组件内部的生命周期调用

    1.1.2 mixins 缺点？

    变量来源不明确：隐式传入，不利于阅读

    存在覆盖问题：组件的 data、methods、filters 会覆盖 mixins 里同名的 data、methods、filters

    1.2 Vue3 中的 Hooks

    1.2.1 Vue3 Hooks 是什么？

    Vue3 的 Hook 函数 相当于 Vue2 的 mixins，区别在于 Hooks 是函数

    Vue3 Hooks 库：

    Get Started | VueUseCollection of essential Vue Composition Utilitieshttps://vueuse.org/guide/

    1.2.2 Vue3 内置 hooks 举例

    先来看下官方提供的一些例子，比如 useAttrs、useSlots...

    1. // 父组件中使用子组件，并传入一些属性
    2. <Test :name="'6666'" :value="8888">Test>
    3.  
    4. // 子组件中，使用 useAttrs 获取 attrs
    5. import { useAttrs } from 'vue';
    6.  
    7. const attrs = useAttrs();
    8.  
    9. console.log(attrs); // name:.....

     

     

    1.2.3 自定义 Hooks

    定义 hooks.ts：

    1. // hooks 中直接使用 vue 中的 APIs 即可
    2. import { onMounted } from 'vue'
    3.  
    4. // 接收的选项
    5. type Options = {
    6.     el: string
    7. }
    8.  
    9. // 返回的选项
    10. type Return = {
    11.     Baseurl: string | null
    12. }
    13.  
    14. export default function (option: Options): Promise<Return> {
    15.   return new Promise((resolve) => {
    16.     onMounted(() => {
    17.       // 获取图片 DOM
    18.       const file: HTMLImageElement = document.querySelector(option.el) as HTMLImageElement;
    19.       // 在图片加载完成后，再进行  base64 转换
    20.       file.onload = ():void => {
    21.         resolve({
    22.             Baseurl: toBase64(file)
    23.         })
    24.       }
    25.     })
    26.  
    27.     const toBase64 = (el: HTMLImageElement): string => {
    28.       // 创建 canvas
    29.       const canvas: HTMLCanvasElement = document.createElement('canvas')
    30.       const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
    31.       // 设置 canvas 宽高
    32.       canvas.width = el.width
    33.       canvas.height = el.height
    34.       // 绘制图片
    35.       ctx.drawImage(el, 0, 0, canvas.width, canvas.height)   
    36.       // 通过这个函数，可以导出一个 base64 格式的图片
    37.       return canvas.toDataURL('image/png')
    38.     }
    39.   })
    40. }

     

    在 .vue 中，使用 hooks.ts：

    2.  
    3. <script lang="ts">
    4. import { reactive, toRefs, defineComponent } from 'vue';
    5. import useBase64 from './hoo';
    6.  
    7. export default defineComponent({
    8.   setup(props, { emit }) {
    9.     useBase64({
    10.       el: '#img',
    11.     }).then((res) => {
    12.       console.log('Base64 格式的图片 ----', res.Baseurl);
    13.     });
    14.  
    15.     const state = reactive({});
    16.  
    17.     return {
    18.       ...toRefs(state),
    19.     };
    20.   },
    21. });
    22. script>

    2. 全局函数和全局变量

    小满Vue3（第二十九章 全局函数和变量）_哔哩哔哩_bilibili小满Vue3（第二十九章 全局函数和变量）是Vue3 + vite + Ts + pinia + 实战 + 源码 +electron的第40集视频，该合集共计110集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV1dS4y1y7vd?p=40&spm_id_from=pageDriver&vd_source=8bc01635b95dbe8ecd349b2c23b03a10

    2.1 app.config.globalProperties

    Vue2 中，使用 Prototype 定义全局函数和全局变量

    Vue.prototype.$http = () => {}

    Vue3 中，没有 Prototype，使用 app.config.globalProperties 定义全局函数和全局变量

    1. const app = createApp({})
    2. app.config.globalProperties.$http = () => {}

    2.2 过滤器还在吗？如何使用全局变量？

    Vue3 中，移除了过滤器，使用 全局函数 替代过滤器

    下面在 main.ts 中，声明了一个全局函数：

    1. app.config.globalProperties.$filters = {
    2.   formatextends any>(str: T): string {
    3.     return `格式化输出文字 --- {str}`
    4.   }

     

    在 main.ts 中，补充声明文件，否则 TypeScript 无法正确推导数据类型，导致页面爆红

    1. type Filter = {
    2.     format(str: T): string
    3. }
    4.  
    5. // 声明要扩充 @vue/runtime-core 包的声明
    6. // 这里扩充 "ComponentCustomProperties" 接口, 因为他是 Vue3 中实例的属性的类型
    7. declare module 'vue' {
    8.     export interface ComponentCustomProperties {
    9.         $filters: Filter
    10.     }
    11. }
    12.

     

    setup() 中，通过 getCurrentInstance().proxy.$filters.xxx 使用全局函数

    1. import { getCurrentInstance } from 'vue'
    2. // 获取 实例
    3. const app = getCurrentInstance()
    4. // 通过 实例.proxy 调用全局方法
    5. console.log(app?.proxy?.$filters.format('test'))

    2.3 createApp()、proxy 源码分析

    关于 createApp()：packages\runtime-core\src\apiCreateApp.ts

    1. // 调用初始化函数，返回 createApp 函数
    2. export function createAppAPI<HostElement>(
    3.   render: RootRenderFunction<HostElement>,
    4.   hydrate?: RootHydrateFunction
    5. ): CreateAppFunction<HostElement> {
    6.   /**
    7.    * @param rootComponent 根组件
    8.    */
    9.   return function createApp(rootComponent, rootProps = null) {
    10.     if (!isFunction(rootComponent)) {
    11.       rootComponent = { ...rootComponent }
    12.     }
    13.  
    14.     if (rootProps != null && !isObject(rootProps)) {
    15.       __DEV__ && warn(`root props passed to app.mount() must be an object.`)
    16.       rootProps = null
    17.     }
    18.  
    19.     // 初始化，就是返回了 app、config.globalProperties、mixins 等等之类的对象
    20.     const context = createAppContext()
    21.     const installedPlugins = new Set()
    22.  
    23.     let isMounted = false
    24.  
    25.     // 将初始化数据，赋值给 app 对象，继续填充属性、版本、方法等
    26.     const app: App = (context.app = {
    27.       _uid: uid++,
    28.       _component: rootComponent as ConcreteComponent,
    29.       _props: rootProps,
    30.       _container: null,
    31.       _context: context,
    32.       _instance: null,
    33.  
    34.       version,
    35.  
    36.       get config() {
    37.         return context.config
    38.       },
    39.  
    40.       set config(v) {
    41.         ...
    42.       },
    43.  
    44.       // 注册插件
    45.       use(plugin: Plugin, ...options: any[]) {
    46.         ...
    47.       },
    48.  
    49.       mixin(mixin: ComponentOptions) {
    50.         ...
    51.       },
    52.  
    53.       component(name: string, component?: Component): any {
    54.         ...
    55.       },
    56.  
    57.       directive(name: string, directive?: Directive) {
    58.         ...
    59.       },
    60.  
    61.       mount(
    62.         rootContainer: HostElement,
    63.         isHydrate?: boolean,
    64.         isSVG?: boolean
    65.       ): any {
    66.         ...
    67.       },
    68.  
    69.       unmount() {
    70.         ...
    71.       },
    72.  
    73.       provide(key, value) {
    74.         ...
    75.       }
    76.     })
    77.  
    78.     ...
    79.  
    80.     // 返回 app
    81.     return app
    82.   }
    83. }

     

    关于 createAppContext()：packages\runtime-core\src\apiCreateApp.ts

    1. export function createAppContext(): AppContext {
    2.   return {
    3.     app: null as any,
    4.     config: {
    5.       isNativeTag: NO,
    6.       performance: false,
    7.       globalProperties: {},
    8.       optionMergeStrategies: {},
    9.       errorHandler: undefined,
    10.       warnHandler: undefined,
    11.       compilerOptions: {}
    12.     },
    13.     mixins: [],
    14.     components: {},
    15.     directives: {},
    16.     provides: Object.create(null),
    17.     optionsCache: new WeakMap(),
    18.     propsCache: new WeakMap(),
    19.     emitsCache: new WeakMap()
    20.   }
    21. }

    关于 proxy：packages\runtime-core\src\component.ts

    1.   instance.accessCache = Object.create(null)
    2.  
    3.   // markRaw 会添加 __skip__ 属性，进而跳过 reactive，防止重复代理
    4.   instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers))

    ctx 就是 $、$attrs、$data、$el、$emit、$props、$parent、$refs、$root、$slots、$watch...等等

    打印 ctx 能够看到 __v_skip: true 表示跳过 reactive，防止对 ctx 进行重复代理

    3. Vue3 插件

    小满Vue3（第三十章 自定义Vue插件 & 源码讲解）_哔哩哔哩_bilibili小满Vue3（第三十章 自定义Vue插件 & 源码讲解）是Vue3 + vite + Ts + pinia + 实战 + 源码 +electron的第41集视频，该合集共计110集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV1dS4y1y7vd?p=41&vd_source=8bc01635b95dbe8ecd349b2c23b03a10

    3.1 什么是插件？怎么使用插件？

    举个栗子~

    ElementPlus 中的 ElMessage 就可以是一个插件，因为全局皆可使用

    使用 createApp() 初始化 Vue 项目后，通过 use() 方法，将插件添加到项目中

    3.2 编写 Vue3 插件（实现 Loading 效果）

    Vue3 插件支持两种形式：

    • 对象形式：要求必须有 install() 方法，Vue3 会将 app 实例 注入 install() 方法
    • 函数形式：就直接当 install() 方法去使用

    3.2.1 添加 Loading 插件页面（loading.vue）

    此文件中需要注意：将外部需要使用的 组件内部方法，进行暴露（defineExpose）

    2.     
    3. <script setup lang='ts'>
    4. import { ref } from 'vue';
    5.  
    6. // 是否展示 loading
    7. const isShow = ref(false)
    8.  
    9. const show = () => {
    10.     isShow.value = true
    11. }
    12.  
    13. const hide = () => {
    14.     isShow.value = false
    15. }
    16.  
    17. // 对外暴露 当前组件的 属性和方法，不暴露就不能被使用，会报错
    18. defineExpose({
    19.     isShow,
    20.     show,
    21.     hide
    22. })
    23. script>
    24.  
    25.  
    26.     
    27. <style scoped lang="less">
    28. .loading {
    29.     position: fixed;
    30.     display: flex;
    31.     justify-content: center;
    32.     align-items: center;
    33.     inset: 0;
    34.     background: rgba(0, 0, 0, 0.8);
    35.     &-content {
    36.         font-size: 30px;
    37.         color: #fff;
    38.     }
    39. }
    40. style>

    3.2.2 编写 Loading 插件 ts 逻辑（loading.ts）

    Vue3 插件的 对象 形式，必须有 install 函数

    Vue3 自动给 install() 内传入 app 实例

    createVNode —— Vue3 提供的底层方法，它会给组件创建一个虚拟 DOM，也就是 Vnode

    render 把 Vnode 生成真实 DOM，并且挂载到指定节点

    不通过 vnode.component.setupState 获取 loading.vue 的方法，因为 loading.vue 没有主动暴露方法的话，Vue3 不推荐在插件中使用 没被暴露的方法

    虽然在打印出来的 vnode 中找到了 component.setupState，但是使用会报错

    使用 exposed 替代 vnode.component.setupState 方法（.vue 里要使用 defineExpose 导出哦）

    1. import { createVNode, render, VNode, App } from 'vue';
    2. import Loading from './loading.vue'
    3.  
    4. // Vue3 插件的 对象 形式，必须有 install 函数
    5. export default {
    6.     // Vue3 自动给 install() 内传入 app 实例
    7.     install(app: App) {
    8.         // createVNode —— Vue3 提供的底层方法
    9.         // 它会给组件创建一个虚拟 DOM，也就是 Vnode
    10.         // 此时打印 vnode，会发现 component 没有值
    11.         const vnode: VNode = createVNode(Loading)
    12.  
    13.         // render 把 Vnode 生成真实 DOM，并且挂载到指定节点，此处挂载点是全局 body
    14.         // 此时打印 vnode，会发现 component 已经有值了
    15.         render(vnode, document.body)
    16.  
    17.         // Vue 提供的全局配置，可以自定义（此处注意命名啊，别跟 elementplus 重复了）
    18.         app.config.globalProperties.$loading = {
    19.  
    20.             // 为啥不通过 vnode.component.setupState 获取 loading.vue 的方法？
    21.             // 因为 loading.vue 没有主动暴露方法的话，Vue3 不推荐在插件中使用
    22.             // 虽然在打印出来的 vnode 中找到了 component.setupState，但是使用会报错
    23.             // 使用 exposed 替代上述方法
    24.  
    25.             show: () => vnode.component?.exposed?.show(),
    26.             hide: () => vnode.component?.exposed?.hide(),
    27.         }
    28.  
    29.     }
    30. }

    3.2.3 在 main.ts 中全局注册 Loading  插件

    1. // 引入 Vue3 插件（ts 文件）
    2. import Loading from './components/loading' 
    3.  
    4. const app = createApp(App)
    5.  
    6. // 注册插件
    7. app.use(Loading)
    8.  
    9.  
    10. type Lod = {
    11.     show: () => void,
    12.     hide: () => void
    13. }
    14.  
    15. // 编写 ts loading 声明文件
    16. // 目的是为了 防止编写插件时报错，还能顺便增加智能提示
    17. // @vue/runtime-core 可以替换成 vue，但是可能会出现报错
    18. declare module '@vue/runtime-core' {
    19.     export interface ComponentCustomProperties {
    20.         $loading: Lod
    21.     }
    22. }
    23.  
    24. app.mount('#app')

     

    3.2.4 在 .vue 中使用 Loading 插件

    2.  
    3. <script setup lang='ts'>
    4.   import { ref, reactive, getCurrentInstance } from 'vue'
    5.  
    6.   const instance = getCurrentInstance()
    7.  
    8.   // 展示 loading
    9.   instance?.proxy?.$Loading.show()
    10.  
    11.   // 5s 后关闭 loading
    12.   setTimeout(()=>{
    13.     instance?.proxy?.$Loading.hide()
    14.   }, 5000)
    15. script>

    3.3 Vue3 中的 app.use() 方法

    3.3.1 手写一个 app.use()

    添加 my-use.ts

    1. import type { App } from 'vue'
    2. import { app } from './main'
    3.  
    4. // 定义泛型，要求插件中，必须有 install 函数
    5. interface Use {
    6.     install: (app: App, ...options: any[]) => void
    7. }
    8.  
    9. const installedList = new Set()
    10.  
    11. export function myuseextends Use>(plugin: T, ...options: any[]) {
    12.     if (installedList.has(plugin)) {
    13.       return console.warn('插件重复添加了 --- ', plugin)
    14.     } else {
    15.         plugin.install(app, ...options)
    16.         installedList.add(plugin)
    17.     }
    18. }

    在 main.ts 中使用 my-use.ts

    1. import { myuse } from './my-use'
    2. myuse(Loading);

    3.3.2 app.use() 源码分析

    packages\runtime-core\src\apiCreateApp.ts

    1. // 注册插件
    2. use(plugin: Plugin, ...options: any[]) {
    3.   // 如果当前组件注册过，就进行报错
    4.   if (installedPlugins.has(plugin)) {
    5.     __DEV__ && warn(`Plugin has already been applied to target app.`)
    6.   // 没有注册过，就判断下 plugin 有没有值，里面有没有 install 方法（对象格式）
    7.   } else if (plugin && isFunction(plugin.install)) {
    8.     // 如果是函数，就将插件添加到缓存中
    9.     installedPlugins.add(plugin)
    10.     // 调用 install 方法，将 app、用户自定义参数 传进去
    11.     plugin.install(app, ...options)
    12.     // 函数格式
    13.   } else if (isFunction(plugin)) {
    14.     installedPlugins.add(plugin)
    15.     plugin(app, ...options)
    16.   } else if (__DEV__) {
    17.     warn(
    18.       `A plugin must either be a function or an object with an "install" ` +
    19.         `function.`
    20.     )
    21.   }
    22.   return app
    23. },

  • 相关阅读:
    [极客大挑战 2019]FinalSQL（bypass盲注）
    安利几个堪称黑科技的电脑软件
    DNA修饰金属铑Rh纳米颗粒RhNPS-DNA(DNA修饰贵金属纳米颗粒)
    Linux上git的基本操作
    4.1 应用层Hook挂钩原理分析
    k8s-----25、资源调度-ResourceQuota资源配额、资源限制limitrange、服务质量QoS
    Linux 环境基础开发工具
    Linux下的基本指令（1）
    STM32CubeMX教程16 DAC - 输出3.3V内任意电压
    【网络原理】应用层协议概述
  • 原文地址：https://blog.csdn.net/Lyrelion/article/details/128174178