最近是一段时间工作实在是太忙了，今天刚好周末，和大家分享一下我在实际项目中遇到的一些坑吧，供大家参考。

Object.freeze的痛

我前面基于vue源码分析的文章记录基于vue在我的真实项目中的性能优化中有提到，在vue的项目开发中，可以大量使用Object.freeze方法将一些数据进行冻结，可以大大提高页面性能，大大减少对内存的消耗。

首先请允许我来简单介绍一下我的项目，它是一个基于Electron+vue桌面应用程序。可能有些人不知道electron是什么？通俗点介绍它就是允许前端开发者将Node技术传统的web技术整合到一起混合开发的平台，一套代码可以打包在多个平台上（我们现在是mac和windows）运行的桌面应用程序。

举个例子：我们可以基于electron可以实现点击一个按钮，去下载一张图片，写入一个日志到本地的磁盘中。也就是说，纯web技术可以实现对Node相关api的调用。

好了，废话少说，那么这个Object.freeze既然可以大大提高页面性能，那么他又会有什么坑呢？前面分析过，Object.freeze原理是将一个对象的configurable属性改成了false。使得这个对象的内部不能被修改，从而在vue中无须添加get和set方法，从而提高性能

接下来我们看下通过Object.freeze冻结对象后的返回

此时obj对象的name属性是不能修改的，那如果我们修改了呢？会发生什么？来看结果

这是在传统的web页面，不会有什么影响，如果是放在vue项目中，会直接抛出异常，我们可以根据错误很好定位到问题

那么问题来了，在electron它不会提示你，而是直接卡死，窗口无响应。。。

当我第一次遇到卡死无响应(不是必现的)的问题时，一般反应都是程序哪里有死循环导致的，但是通过代码层面排查，始终没有发现问题，最后通过调试，才知道是这个Object.freeze冻结的原因导致的。

所以我之前也说过，要想修改Object.freeze后的数据，一定要通过{...obj},将冻结的对象解冻再去修改。切记啊。解决了这个问题，也是一种收获。

基于Electron主进程的调试的坑

一般来说，我们写的代码可能因为数据的原因出现的异常，浏览器或者Node端的控制台会有错误提示。我们根据错误对应的修复一下问题就好了。

在electron中，我又遇到了奇葩的事情。在循环中调用的方法，也是因为数据的原因，有一个方法抛出了异常。但是。。。控制台没有任何的报错。

怎么办？打断点呗，for循环打断点本来就是一个要命的节奏。哈哈哈哈哈，说出来你们可能也不信，也没捕捉到问题。

好吧，也是调(Meng)试(BI)了好久，使出了终极大招，加将循环用try catch包裹起来吧。没错，问题定位到了。所以，针对node端问题的定位可以采用些方法，亲测有用。

html注入

what? 看到这个标题，相信我，我没写错，真的是html注入，不是js注入。简单说一下场景，在vue中，很多场景需要通过v-html来渲染一段html代码块。正常来说，是没什么问题的，但是如果你们渲染下面这块代码块的可以试试？

<meta http-equiv="refresh" content="0;url=http://www.zhipin.com/">

来看结果

当前在百度首页，然后我在它的body里面注入上面的代码块，结果跳转到了Boss直聘的首页了。

html代码块相信大家一看就明白了，所以建议大家在做v-html绑定的时候，将meta标签可以过滤掉。具体怎么做相信大家都知道了哈。

以上的经验都是我最近工作遇到的问题和解决办法，希望对大家在工作中可以避开这些坑哦

这里是 畅哥聊技术 关注我，分享真实工作经验，技术心得，更多精彩内容，持续更新中。。。

（全文完）