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

【油猴开发指南】Vue2如何控制实例的原生事件周期

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    716

    主题

    6018

    回帖

    6808

    积分

    管理员

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

    积分
    6808

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2024-11-15 10:12:44 | 显示全部楼层 | 阅读模式

    之前我们已经知道了Vue2在update函数中会对dom进行赋值vm.$el.__vue__ = vm;
    如果想要得到Vue的组件事件该怎么做?
    可以写一个简单的demo

    <template>
      <div id="app">
        <button @click="inc=inc+1">{{ inc }}</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'App',
      data(){
        return {
          inc:0
        }
      },
      updated(){
        console.log('123')
      }
    }
    </script>

    在触发打印的位置下一个断点
    堆栈如下
    image.png
    其中第一个函数是我们自己的函数,第二个是为了捕获用户函数错误从而进行包装的函数,第三层函数应该就是我们需要的了,追进去看看

    function callHook$1(vm, hook, args, setContext) {
        if (setContext === void 0) {
            setContext = true;
        }
        // #7573 disable dep collection when invoking lifecycle hooks
        pushTarget();
        var prevInst = currentInstance;
        var prevScope = getCurrentScope();
        setContext && setCurrentInstance(vm);
        var handlers = vm.$options[hook];
        var info = "".concat(hook, " hook");
        if (handlers) {
            for (var i = 0, j = handlers.length; i < j; i++) {
                invokeWithErrorHandling(handlers[i], vm, args || null, vm, info);
            }
        }
        if (vm._hasHookEvent) {
            vm.$emit('hook:' + hook);
        }
        if (setContext) {
            setCurrentInstance(prevInst);
            prevScope && prevScope.on();
        }
        popTarget();
    }

    我们可以发现组件的事件钩子都是从实例的$options通过对应的事件名进行获取
    所以我们也可以相应的进行读取,插入,劫持等等操作,例如

    dom.__vue__.$options['updated'].push(()=>console.log('inject'))
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    716

    主题

    6018

    回帖

    6808

    积分

    管理员

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

    积分
    6808

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2024-11-15 13:28:28 | 显示全部楼层
    回复测试
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-11-21 13:37
  • 签到天数: 213 天

    [LV.7]常住居民III

    306

    主题

    4241

    回帖

    4095

    积分

    管理员

    积分
    4095

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2024-11-15 14:09:09 | 显示全部楼层
    ggnb
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    昨天 09:12
  • 签到天数: 57 天

    [LV.5]常住居民I

    5

    主题

    26

    回帖

    67

    积分

    初级工程师

    积分
    67

    油中3周年挑战者 lv2油中2周年

    发表于 2024-11-15 17:12:05 | 显示全部楼层
    又看到哥哥更新vue系列了ggnb!
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    716

    主题

    6018

    回帖

    6808

    积分

    管理员

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

    积分
    6808

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2024-11-15 20:06:17 | 显示全部楼层
    krystal 发表于 2024-11-15 17:12
    又看到哥哥更新vue系列了ggnb!

    hhh
    碰到有人vue有点问题就更点
    一个人解决完了其他人就不用思考了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    前天 09:29
  • 签到天数: 830 天

    [LV.10]以坛为家III

    31

    主题

    555

    回帖

    1572

    积分

    荣誉开发者

    积分
    1572

    荣誉开发者新人进步奖油中2周年生态建设者新人报道挑战者 lv2油中3周年喜迎中秋

    发表于 2024-11-16 05:53:43 | 显示全部楼层
    GGNB 思路一下子打开了
    回复

    使用道具 举报

  • TA的每日心情

    2024-6-12 17:04
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    4

    主题

    28

    回帖

    63

    积分

    初级工程师

    积分
    63

    油中3周年油中2周年新人报道挑战者 lv2

    发表于 2024-11-17 13:26:46 | 显示全部楼层
    GGNB :)
    回复

    使用道具 举报

    发表回复

    本版积分规则

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