上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

nuxt的plugin作用原理与执行时机

[复制链接]
  • TA的每日心情
    开心
    23 小时前
  • 签到天数: 53 天

    [LV.5]常住居民I

    352

    主题

    3091

    帖子

    3100

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3100

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2022-6-5 00:49:41 | 显示全部楼层 | 阅读模式

    前文

    因为nuxt的资料实在太少了
    我学nuxt大概才三四天
    参考过程大概写的这篇文章
    算作抛砖引玉吧
    大佬轻喷

    正文

    这里我创建一个plugins的elui.js
    图片.png
    我们观察.nuxt/index.js
    图片.png
    可以看到这里直接import了函数
    这个index.js会在客户端和服务端执行的
    也就是说无论客户端还是服务端都会注入相应的组件和变量
    那我们在nuxt中export deafult的函数又是干什么的呢?
    我们可以继续搜索一下变量
    在这里如果检测默认导出的是一个函数
    我们就会调用这个函数,向内传入context以及inject函数,方便我们进行修改
    context以及store,vue等等
    如果没有导出
    则不执行,仅利用import时的副作用做vue的组件注入以及其他行为
    图片.png
    我们在elui写一下代码
    图片.png
    然后执行观察效果
    可以看到是在客户端以及服务端都执行了的
    图片.png
    我们在看一下inject函数

      function inject(key, value) {
        if (!key) {
          throw new Error('inject(key, value) has no key provided')
        }
        if (value === undefined) {
          throw new Error(`inject('${key}', value) has no value provided`)
        }
    
        key = '$' + key
        // Add into app
        app[key] = value
        // Add into context
        if (!app.context[key]) {
          app.context[key] = value
        }
    
        // Check if plugin not already installed
        const installKey = '__nuxt_' + key + '_installed__'
        if (Vue[installKey]) {
          return
        }
        Vue[installKey] = true
        // Call Vue.use() to install the plugin into vm
        Vue.use(() => {
          if (!Object.prototype.hasOwnProperty.call(Vue.prototype, key)) {
            Object.defineProperty(Vue.prototype, key, {
              get () {
                return this.$root.$options[key]
              }
            })
          }
        })
      }

    这几句做了简单的检测处理

          if (!key) {
          throw new Error('inject(key, value) has no key provided')
        }
        if (value === undefined) {
          throw new Error(`inject('${key}', value) has no value provided`)
        }

    对app进行注入,也就是vue根组件实例前的options选项,同时也对context注入

        key = '$' + key
        // Add into app
        app[key] = value
        // Add into context
        if (!app.context[key]) {
          app.context[key] = value
        }

    检测vue是否已经注入过了

        // Check if plugin not already installed
        const installKey = '__nuxt_' + key + '_installed__'
        if (Vue[installKey]) {
          return
        }
        Vue[installKey] = true
        // Call Vue.use() to install the plugin into vm

    对vue原型进行注入
    这里我具体忘了,应该是利用vue初始化的时候将之前在context中注入的内容放到了$options中,而$root指的是根实例

        Vue.use(() => {
          if (!Object.prototype.hasOwnProperty.call(Vue.prototype, key)) {
            Object.defineProperty(Vue.prototype, key, {
              get () {
                return this.$root.$options[key]
              }
            })
          }
        })

    总结

    那么我们总结一下
    默认导入的plugins的js
    无论服务端还是客户端都会执行代码
    而export default只是提供了context和inject函数的入口回调罢了
    那么我们就初步学习了nuxt的plugins~

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    2022-3-7 09:47
  • 签到天数: 1 天

    [LV.1]初来乍到

    22

    主题

    123

    帖子

    157

    积分

    中级工程师

    Rank: 5Rank: 5

    积分
    157
    发表于 2022-6-13 18:39:49 | 显示全部楼层
    哥哥好厉害
    回复

    使用道具 举报

  • TA的每日心情
    开心
    23 小时前
  • 签到天数: 53 天

    [LV.5]常住居民I

    352

    主题

    3091

    帖子

    3100

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3100

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2022-6-13 20:36:03 | 显示全部楼层

    主要next的资料实在太少了...
    少的让人恶心
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-3-7 09:47
  • 签到天数: 1 天

    [LV.1]初来乍到

    22

    主题

    123

    帖子

    157

    积分

    中级工程师

    Rank: 5Rank: 5

    积分
    157
    发表于 2022-6-13 21:52:25 | 显示全部楼层
    确实,好多前沿都是英文文献,机翻有差点味道,愈发觉得英语的重要性了
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表