Bootstrap

【Nuxt】自定义插件和生命周期

自定义插件

在这里插入图片描述

方式一:

app.vue

// 创建插件(在app.vue中创建全局可以使用 而在某个页面中创建只有该页面可以使用)
// 方式一:
const nuxtApp = useNuxtApp();
nuxtApp.provide("formDate", () => {
  return "2023-12-12";
})
nuxtApp.provide("version", "1.0.0");
console.log(nuxtApp.$formDate(), nuxtApp.$version, nuxtApp.$formatPrice(100.1234))

方式二:

~/plugins/price.ts

// vue 实例创建的时候 插件会被注册
export default defineNuxtPlugin((nuxtApp) => {
    return {
        provide: {
            formatPrice: (price: number) => {
                return price.toFixed(2)
            }
        }
    }
})

如果只是允许客户端使用,则需要命名为 prive.client.ts ,然后使用:

if (process.client) {
 console.log(nuxtApp.$formatPrice(100.1234))
}

插件注册顺序文件加数字来确定,比如:1.prive.ts 。

生命周期

App 生命周期

hooks

~/plugins/lifecycle.ts

export default defineNuxtPlugin((nuxtApp) => {
    // 生命周期
    nuxtApp.hook('app:rendered', () => {
        console.log('app:rendered')
    })
    nuxtApp.hook('app:created', () => {
        console.log('app:created')
    })
    nuxtApp.hook('app:mounted', () => {
        console.log('app:mounted')
    })
    nuxtApp.hook('app:error', () => {
        console.log('app:error')
    })
})

或者在 app.vue 中使用也是同样的道理。

const nuxtApp = useNuxtApp();
nuxtApp.hook('app:rendered', () => {
  console.log('app:rendered')
})
nuxtApp.hook('app:created', () => {
  console.log('app:created')
})
nuxtApp.hook('app:mounted', () => {
  console.log('app:mounted')
})
nuxtApp.hook('app:error', () => {
  console.log('app:error')
})

这里会有一个问题,在 vue 文件中 setup 语法糖下 只能执行 setup 之后的钩子,所以建议将生命写到 plugins 中。

组件生命周期

用法和上述一样。

在这里插入图片描述

由于服务端只会执行 beforeCreate, created, setup 钩子,所以需要注意不要在他们里面使用副作用函数(比如定时器,否则难以清除),所以需要将含有副作用的函数放在 mounted 中。

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;