写在前面的话

开这个主要是记录一些自己在工作中遇到的bug，如果有小伙伴遇到类似的也可以当做一个参考。
【PS:】这个帖子会持续更新。
在这之前，先分享一个我在掘金上看到的比较有用的帖子，希望对大家有所帮助。我是地址:Vue 项目里戳中你痛点的问题及解决办法

本来想整一个toc目录，发现不能像有道云笔记那样，可能是我打开的方式不对，如果有会的小伙伴，教教我怎么弄这个(*/ω＼*)

1.复制内容到剪贴板

在ios8中，系统自带的复制命令和Clipboard插件复制都会失效 因为系统自带的document.extComand指令兼容在safari10以上，而插件支持也是在safari10以上 ios8的版本过低，所以会失效。

这种情况一般降级处理:
1.展现要复制的内容，让用户自行手动复制。
2.弹窗提示，通过其他渠道，例如扫描二维码之类的 PS：用Clipboard插件复制比原生的要好，原生的document.extComand有个Bug，第一次点复制之后，剪贴板里面的内容不是复制的内容，必须得第二次复制，剪贴板里的内容才是这个内容。 【附上Clipboard的地址】：Clipboard地址

2.过滤传递过来的值的显示形式

对于父组件传给子组件的值，如果想要修改属性的展现形式。推荐使用computed属性。
因为父组件传给子组件的值，只是一个引用的过程，可以参考引用属性之类。
例如：时间，如果后台传来了时间的字符串包含了具体时间，也就是小时、分钟等。 而前端展示又只想要年月日，这里不用filters。不是过滤。得用上computed属性才行。

3.关于scrollTop

在vue项目，尤其是引用了第三方库做了加载更多操作的文件中，在配合navbar切换时，切换后的滚动条并不会自行滚动到顶部，而是会记录之前的滚动行为，停留在页面底部。
如果想要在切换的时候，同时页面滑动到顶部，像是刚进来的样子，这种功能其实就是“回到顶部”功能。
PS: 这个方法得放在watch中执行，监听navtab切换时的值，然后进行操作。
下面是一段网上说的设置回到顶部的常用代码：

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

然后设置scrollTop为0，但是尝试了还是不行。 也尝试过在滑动层的dom进行scrollTop操作，最终都会说scrollTop is undefined。
尝试过每次切换的时候打印当前scrollTop的值，发现都是0，但是确实在切换的时候并不能回到顶部，好忧桑。。。
此时有两种办法：
方法一：
将navtab切换的两个当成两个不同组件来写，当watch的select值发生变化时,this.$route.replace到那个组件上去。这样路由有个“滚动行为”，可以将页面直接回到顶部。看起来像是新渲染出来的。
【但是这种方法不好，属于下下策了，因为本身这两个页面也许是同一种功能、样式，只是因为请求参数不同，而导致看起来像是两个页面一样】
方法二：
这个方法是我在查看之前的代码时发现的，也就是在引用第三方组件的父层，绑定ref,对这个dom进行操作。具体操作如下

watch: {
    selected: function (val, oldVal) {
      this.$refs.friendPage.scrollTop()  // 每次切换滚动到页面顶部
      this.chooseLevel(val) // 切换navtab时重新请求列表
    }
  },

重点是这一句this.$refs.friendPage.scrollTop()
之前有做过类似的操作，但是不是xxx.scrollTop()而是xxx.scrolltop = 0，这样写就会报scrollTop is undefined的错误。

4.动态组件+父子传值

最近接到这样一个需求，父组件内子组件的顺序不是固定的，也就是在父组件内，可能以下是1234子组件的排列，也可能变成了2413这种排列顺序。之前都是:

父组件内放子组件

就是这样这样

items: ['introduce', 'about-us-img']

这个时候父组件内子组件就是introduce在前，about-us-img在后，但是！！！数组咋办啊，，直接写<component :is="item.name" v-for="(item, index) in items" :key="index" :introduceText="introduce">

--- 我是9月11日的更新分割线 ---

前端性能化webpack-bundle-analyzer

这个神器大家应该都听过，就算没听过，可能也见到过。
就是这个。

我就是这个神器

好像是vue-cli集成的

接下来就是见证奇迹的时刻，输入这样一串命令。
npm run build --report

image.png

于是我就出来了