写在前面的话
开这个主要是记录一些自己在工作中遇到的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这种排列顺序。之前都是:
父组件内放子组件
这种在父组件内，将子组件排列好，然后传对应的数据过去。
但是，想要动态改变子组件顺序，而且是针对不同的场景。比如说A用户登录看到的是12的顺序，B用户登录看到的就是21的顺序。
查了一些资料，可以用到
<component>和:is，请看大屏幕。啊哈：
就是这样这样
items存放的是子组件的名称，也就是
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
这个神器大家应该都听过，就算没听过，可能也见到过。
就是这个。
我就是这个神器
在这里可以看到各个模块打包的js占用大小。
本来我还噼里啪啦各种百度然后进行配置，当报错的时候，发现了这么一句话。
然后我就去
webpack.prod.conf.js里面找，发现了这样一段代码。
好像是vue-cli集成的
接下来就是见证奇迹的时刻，输入这样一串命令。
npm run build --report
image.png
加个参数就行了，然后就会执行，接下来浏览器自动打开
http://127.0.0.1:8888/这个地址。
于是我就出来了
网友评论