在有 Vue Router 的项目中如何在 Object 原型上增加方法

最新推荐文章于 2022-08-02 14:56:07 发布

原创

最新推荐文章于 2022-08-02 14:56:07 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-router #prototype #Object #defineProperty

在Vue Router项目中，为Object.prototype添加自定义方法可能导致方法体内容被拼接到url参数里。原因是Vue Router的query.js中的resolveQuery函数在处理时，通过for-in遍历到了这个可枚举的log方法。解决方案是利用Object.defineProperty将方法设为不可枚举，以防止在for-in循环中被处理。建议避免直接修改内置对象的prototype，而是采用外置公共方法。

现象

在有 Vue Router 的项目开发过程中，在 Object.prototype 上挂自定义方法，会发现它的函数体内容会被拼接到 url 参数里。（下面以 Object.prototype.log 为例）

import Vue from 'vue'
import App from './App'
import router from './router'
// 在 Object.prototype 上挂了一个方法
Object.prototype.log = function() {
   
   
  console.log(this)
}
new Vue({
   
   
  el: '#app',
  router,
  components: {
   
    App },
  template: '<App/>'
}