dd-touch问题总结

1.二次封装cube-scroll组件

• 遇到问题:
  • 1cube-scroll组件的上拉加载功能, 在没有数据的时候或数据一样时, 需要调用this.refs.scroll的forceUpdate()方法, 才能结束此次加载, 从新开始下次监听, 这里需要把this.refs.scroll传到父组件,
    • 解决方法: 在data中声明一个变量, 在mounted钩子中将, this.refs.scroll传给这个变量, 在通过emit把scroll组件的pulling-up和pulling-down事件派发出去并把this.$refs.scroll作为参数传过去

2.tabbar配合动态组件时候, 出现警告

vue.runtime.esm.js?8bc8:587 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "currentIndex"

found in

---> <DdTabbar> at src/components/dd-tabbar.vue
       <Test1> at src/components/test1.vue
         <App> at src/App.vue
           <Root>

错误翻译: 避免直接改变prop, 因为props的值会被覆盖, 当父组件重新渲染时, 用data或computed属性复制prop的值, prop变成currentIndex

解决方式报错已经给出: 把prop复制到data里

3.tabbar组价配合cube-slide组件, 互相关联index

• 1通过this.$refs.slide获取到cube-slide的vue实例, 通过实例的访问BScroll对象, 调用goToPage()去改变cube-slide的轮播

4.进度条
收获: 学会了svg-progess-bar这个轻量有好用的库的使用,

• 解决方法: 使用svg-progress-bar插件, github

5.数字快速增涨动画效果

• 解决方法: 使用vue-count-to插件, wiki
• api:

属性	描述	类型	默认值
startVal	动画开始的数值	Number	0
endVal	结束的数值(最终需要显示的数值)	Number	2017
duration	动画时间	Number	3000
autoplay	是否在mounted后自动播放	Boolean	true
decimals	需要显示的小说位数	Number	0
decimal	分割小数的字符	String	.
separator	千进制分隔符	String	,
prefix	前缀	String	''
suffix	后缀	String	''
useEasing	是否使用easing function	Boolean	true
easingFn	easingFn	Funcion	-

方法名	描述
mountedCallback	when mounted will emit mountedCallback
start	start to countTo
pause	pause to countTo
reset	reset the countTo

6 移动端适配: amfe-flexible
收获: 配合sass等, 实现rem适配
7 登录接口报404,
问题 原因: 未使用Form Data方式传递数据
解决方法: 使用axios.transformRequest:

axios({
  ...,
  transformRequest: [function(data, headers) {
    let ret = ''
    for(item in data) {
      ret += '&' + encodeURIComponent(item) + '=' + encodeURIComponent(data[item])
    }
    ret = ret.slice(1)
    return data
  }]
})

收获:

• Form Data和Request Payload的区别:
  • 1. Content-Type不同: Request Payload是applications/json; Form Data是 application/x-www-form-urlencoded
  • 2. 请求的数据格式不同: RP是json: {a: 'a', b: 'b'}, FD是 key1=val1&key2=val2
• 学会了axios如何提交Form Data数据

8 登录验证接口报跨域(在配置好devServer的情况下),这个是后台处理的问题,

9 在使用filter时候, 对数字进行处理

• 情景: 为防止不是数组使用Number()方法转换, 如果结果是NaN, 怎直接返回原值,
• 问题: 如何用NaN进行if()判断,可以使用isNaN()方法, 除了数字, 都返回true

10 在使用keep-alive和cube-scroll时候, 再次返回路由的时候, 无法滑动, cube-scroll在有请求数据的时候会展示不全,

• cube-scroll请求接口显示不全是因为, 请求接口还没结束, cube-scroll就已经获取了填充内容的高, 如果请求完接口后会改变填充内容的高度, cube-ui就不会更新高度, 这样就导致了, 显示不全(betterScroll原理就是父子容器的高度差) => 解决方案是: 预先设定好, 内容的高度
• keep-alive这个问题目前还没解决, 不过貌似, 时有时现

11 项目中出现很多, 单独接口并且要求执行顺序, 使用Promise的链式调用,

• 在then()里边返回下一个接口的Promise

12 请求数据时候,跳转路由,需等待接口请求完毕才能完成路由跳转?

• 使用axios的CancelToken取消请求, 详情请见axios中文翻译

13 项目中精选产品, 一个标题, 后边跟着1个或若干子项,
使用递归组件 - 待解决

14 computed和template里无法访问数组里的值?

解决方法: 在mutations, 异构需要的数组

15 axios.post json转formData

• 使用内置的qs模块的qs.stringify(), 把data参数转一下就行了

16 cube-slide在请求接口数据的时候, initialIndex参数(设置默认页)失效

解决方法: 查看cube-slide源码, 发现凡是请求的接口, 都需要执行一次refresh()方法, 在refresh()方法里, 初始化currentPageIndex = 0 而并非initialIndex, 手动修改

17 路由跳转时, 中断所有的ajax请求

解决方法:

const CancelToken = axios.CancelToken
const source = CancelToken.source()
// 将 cancelToken: source.token添加到axios配置中
// 调用source.cancel('text')

18 <component :is="">在使用动态组件时, 判断组件切换

19 需要在v-bind指令里拼接, filter过滤的数字和字符串

解决办法: 在v-bind里, filter会过滤掉v-bind里所有的内容, 只能在filter里进行处理, 通过正则匹配汉字部分, indexOf()和slice()获取数字部分

20 在getters中异构state中的数据报错, 无法直接在state中的对象里添加属性

解决方法: 将对象进行深拷贝

• 深拷贝的方法(对象)
  • 1. Object.assign(): 只有一层深拷贝, 如果只是一层的深拷贝可以使用, 需要封深层的深拷贝可以用2
  • 2. var obj1 = JSON.parse(JSON.stringify(obj))
• 深拷贝的方法(数组)
  • 1. for循环
  • 2. slice(): var copyArr = arr.slice(0)
  • 3. concat(): var copyArr = arr.concat()
  • 4. es6 扩展符: var [ ...copyArr ] = arr

21. 在使用actions异步请求数据的时候, 报错, 找不到数据

• 出错原因: 在数据还未请求回来, 就进行了渲染, 使用v-if做判断

22. 使用数组方法concat() 遇到的问题

- concat()方法不会修改原数组, 需要重新获取concat()的值, var newArr = arr.concat(arr1)

23. 父组件跳转子路由, 子路由里有需要请求数据, 并吧数据存到vuex里, 每次跳到路由, 都会重复请求一次接口, 就会叠加重复数据

• 出错原因, vuex中的数据并没有被清理, 而进入路由前都会再次请求一次接口, 这导致了数据的重复获取
• 解决方案:
  • 在组件中的beforeRouteLeave(){}钩子中, 初始化vuex中的数据 - 这样的话每次进入都会重复请求数据
  • 在请求数据时做一个判断, 如果有数据则不再请求数据, 对于上拉加载的需要在vuex定义对应的页数 - 这种方案, 有点复杂, 但是可以减少http请求, 推荐 - 这里需要注意一点: 不可吧state中记录页数的数据缓存到变量里, 而要直接使用, 否则mutations的改变不会更新到缓存的变量里

24. 使用keep-alive时, api的数据被缓存之后, 在切回来, 报错Unable to preventDefault inside passive event listener due to target being treated as passive -> 无法监听touch事件

• 原因: 不明
• 解决方案: 在css里添加* { touch-action: none; }, 很tm神奇

25. 我想把cube-scroll的组件BScroll对象, 传到回到顶部组件, 在mounted里获取不到这个BScroll

• 这是因为BScroll对象, 这个时候, 还没有实例化, 需调在$nextTIck()里面获取

26. 如何往vue的动态组件<component :is="">里传值

• ps: if()判断的时候, undefined不要加 ''

27. 使用keep-alive时候, 使用Bus, 不在activated()钩子里emit事件, 是无法on监听到, 在请求玩接口的.then()函数里监听不到bus.$emit()的事件, 这个目前不知道为啥, 但是问题解决了

• 解决方案: vue内置组件<component :is=""> 是支持props和$emit的

28. 怎么判断对象{}为空

- 方法一: 

var c = {};
if(JSON.stringify(c) == "{}"){ console.log(7);}

29. keep-alive问题, keep-alive的钩子函数activated()子组件比父组件优先执行,