使用vue遇到的坑
2019-1-131.轮播，canvas特效等出现问题：把他们执行顺序加到异步，稍后执行，eg:settimeout()..
2.内存泄漏总结: 打印 debugger
所以综合上面的分析，造成内存泄露的可能会有以下几种情况：
（1）监听在window/body等事件没有解绑
（2）绑在EventBus的事件没有解绑
（3）Vuex的$store watch了之后没有unwatch
（4）模块形成的闭包内部变量使用完后没有置成null
（5）使用第三方库创建，没有调用正确的销毁函数
3.vue+.net开发 打包后静态文件打开空白 找不到static: 需要在config index.js 的buid 的
assetsPublicPath: './', //设置好
4.http://www.cnblogs.com/YuKiee/p/9681151.html
数据改变，视图不改变 Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。
这些getter/setter对用户来说是不可见的，但是在内部他们让vue追踪依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher实例对象，它会在组建渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。
Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以使用$set方法将相应属性添加到嵌套的对象上。
解决办法：1.Vue.set(object, key, value) 【或 this.$set(object,key,value)】 2.Object.assign( { } , vm.object , {a:’ 1 ‘, b:’ 2 ‘ }) 3.this.trees.splice(idx,1,’x’)
在数组中的应用
linkColor (index) {
for (let i = 0; i < this.list.length; i++) {
if (i !== index) {
// 循环中的数组赋值
this.$set(this.list, i, false);
this.$set(this.list, index, true);
}
}
console.log(this.list);
}
三层以上这样用：无法用set 只能用splice
that.FriendList.map((item,i) => {
if (
that.receiveM.toGroupId === item.id ||
that.receiveM.userId === item.id ||
that.receiveM.toUserId === item.id
) {
if (that.toGroupId !== item.id) {
let badge=item.badge;
badge++
console.log('标标增加了');
let obj={};
[obj.badge,obj.code,obj.id,obj.isgroup,obj.name,obj.users]=[badge,item.code,item.id,item.isgroup,item.name,item.users];
that.FriendList.splice(i,1,obj)
}
}
});
5.https://github.com/surmon-china/vue-awesome-swiper
swiper 轮播+i18n国际化 bug
//autoplay: true, loop:true时; 配合 vue-i18n切换语言时, {{$t('text')}}里面的文字text不会变化假如有三张图片，swiper会多2张图片，一张占0位置，一张过渡，第一次循环234，往后每次都是循环345，能点击下标是245，渲染页面的是3位置是在第一次循环的234之前赋值的，这个之前也在页面调用i18n改变语言之前。。。。。所以会出这个问题
在i18n第一次赋值的 main.js中 和第二次改变值的按钮中，，swper的loop(无限轮播) 的3位置 在上述2中之间渲染，正好整个vue生命周期也在这中间，所以是无法通过改变swper赋值以及构造时的位置来解决问题。
唯一解决办法就是不用loop无限轮播。。。设置为loop:false。。。。
6.https://cloud.tencent.com/developer/section/1489860
关键点：把vuei18n和element的i18n都注入到Vue中，并且同步。
element+cdn国际化
import memory from './memory.vue'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import koLocale from 'element-ui/lib/locale/lang/ko'
import * as zhCN from './json/zh-CN.js'
import * as ko from './json/ko.js'
import * as en from './json/en.js'
window.eventBus=new Vue();
const messages = {
'zh-CN': Object.assign(zhLocale, zhCN),
'ko': Object.assign(koLocale, ko),
'en': Object.assign(enLocale, en)
};
const i18n = new VueI18n({
locale:'zh-CN',
messages
});
Vue.use(ELEMENT,{
i18n: (key, value) => i18n.t(key, value)
});
new Vue({
el: '#app',
i18n,
template: '<memory/>',
components: { memory }
})
6.https://github.com/mozilla/pdf.js/issues/9643
pdf.js里面显示不完整日语 韩语等，
插件运行需要依赖.proties等文件，iframe跨域时需要后台IIS或者相关的文件来允许，才能获得并加载它。
7.正则匹配 g(全局匹配)，会记录test()的length长度，然后第二次test(),会从记录的length开始，所以没有值了。会出现执行第一次是true,第二次是false。
用一个变量把保存下来，多次使用。
8.ios h5无法下载文档，会直接预览，但是uc可以做到下载。
应该是没有读写权限，uc毕竟是app,可以直接调用ios原生方法做到下载，但是微信，钉钉，qq里面应该没做相应的处理。
纯h5应该是没有办法解决的。
9.安卓 钉钉里面不能接收后台传过来的cookie.
怀疑是安卓的钉钉浏览器不允许携带缓存cookie和local都不行，以及使用了各种babel转化es5 不是es6的原因，我在ie都显示正常.
多方尝试，我确认就是安卓钉钉的浏览器不能接收后台传过来的cookie，而ios可以，安卓自带浏览器也可以。。。钉钉没做好。。。。目前想到解决方案是用token的形式代替
10.百度seo左边的图片需要百度站长登录，审核，达到一定标准才可以上图片
11.tbody 会引起页面重排出错!!!! 不要用
12.需要频繁改变样式的结构还是用原生e.target代替vue数据
毕竟数组每次查找id,循环都要消耗性能。。。
13.钉钉 pdf 安卓 用不起 ：
iframe之后的异步拿数据更新，此时在安卓钉钉里面 vue是追踪不到数据的，必须由上个组件传到iframe里面。。后台也需要设置conttype(2个同时设置，否则不行)
14.mint ui 的上下的线去不掉
他实际上是background-image来做的线，/deep/放在最外面，仔细查找mint-cell-wrapper。。。
15.A.在vue里面使用echarts,beforeCreate、created、beforeMount这三个周期里面挂载不了echarts
必须等其他dom就完成，才能挂载echarts.
B.每次数据改变或者v-if改变图标，都会到时echatrs失效。
可以放在beforeUpdata钩子里面再次挂载。。
16.v-if和v-else-if会串.
解决：此时必须给第一个echarts加一个空div!!!!!
17.滚动条监听失败，增加true。
window.addEventListener('scroll', this.showHeader,true)
showHeader(e){
console.log(e.target.scrollTop)
},
造成这个原因是:根元素上添加了 overflow-y:auto;