踩坑
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
未知(待更新)
“Error in render: “TypeError: Cannot read property ‘0’ of undefined”
三层表达式a.b.c,在对象a中没有对象b,那么读取对象a.b.c中的值,自然会报错。如果是两层表达式a.b则不会报错,返回的是undefined。
【根本原因】:
a是vuex中state管理加载的数据,异步调用显示,然后vue渲染机制中:异步数据先显示初始数据,再显示带数据的数据,所以上来加载a时候还是一个空对象,当渲染完成后,才加载异步数据。所以在渲染时,出现的三层表达式在a中取b[0]数组中的小标为0的对象还不存在,再在这个对象中取其他值自然会报错,但是渲染完成后,a中的值加载好了,自然可以取到,这也就解释了为什么界面正常显示,但开发者工具会报错的原因。
解决方案:
一、在上面一个div中添加v-if判断条件,如果info.supports取不到,则不加载该div即可解决。
二、在没有值的时候返回一个undefine
Unable to preventDefault inside passive event listener due to target being treated as passive
当浏览器首先对默认的事件进行响应的时候,要检查一下是否进行了默认事件的取消。这样就在响应滑动操作之前有那么一丝丝的耽误时间。现在:google就决定默认取消了对这个事件的检查,默认时间就取消了。直接执行滑动操作。这样就更加的顺滑了。但是浏览器的控制台就会进行错误提醒了。
wnidow.addEventListener('touchmove', func) 效果和下面一句一样
wnidow.addEventListener('touchmove', func, { passive: true })
解决方案:
1、注册处理函数时,用如下方式,明确声明为不是被动的
window.addEventListener(‘touchmove’, func, { passive: false })
2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。
Component template should contain exactly one root element.If you are using v-if on multiple elements, use v-else-if to chain them instead.
组件模板需要一个根元素
style scope可能出现的问题
touch-action 样式
lyric
lyric改變需要先將之前的清理掉,避免bug,計時器衝突
action中直接更改state
在action中要对state数据进行处理,需要先_arr= arr.slice() 获取副本,再操作,否则会直接更改state值,且使用action时注意参数一致
查漏补缺
watch比create先执行
有需要可以在create里this.$watch
audio的paly和canplay
oncanplay是当缓存足够时便派发。(可能还未播放,触发时机短)
而onplay是当媒介已开始播放,才派发。(开始播放后,触发等待时间长)
res.json([body])
发送一个json的响应,这个方法和将一个对象或者一个数组作为参数传递给res.send()方法的效果相同
同时使用过渡和动画
- 自定义一个appear-active-class,让它等于 enter-active-class:
并再添加一个appear的属性,表示在一开始出现的时候元素会有一个动画效果 - 手动来设置动画执行的时长,以3s为整个动画执行的时间,可以设置:
type=“transition"表示动画的时长以transition执行的时长为准
:duration=“5000” 或:duration=”{enter:5000, leave:8000}"
父组件传达子组件的参数在data()里和放到created()定义,两者有什么区别?
变量不需要观测它的变化的时候不用定义在 data 里,这样也会对性能有所优化,需要监测这个数据变化的时候,放在 data() 里,会给数据添加 getter 和 setter
import {} from “” 什麽時候加{}
不带花括号的引用,引入的都是default的
key值的作用(持续更)
- 防止复用
- 使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
autofocus 在移动版 Safari 上不工作
getBoundingClientRect()
element.getBoundingClientRect()方法返回元素的大小及其相对于可视窗口的位置。
返回值是一个Obj
Obj.top:元素上边到视窗上边的距离;
Obj.right:元素右边到视窗左边的距离;
Obj.bottom:元素下边到视窗上边的距离;
Obj.left:元素左边到视窗左边的距离;
v-for组件用refs获取得到的是数组
vue $router和$route的区别
- router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象。经常用的跳转链接就可以用this.$router.push,和router-link跳转一样。
- this.$router.push会往history栈中添加一个新的记录。
route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。
props default 数组/对象的默认值应当由一个工厂函数返回
props: {
sugestion: {
type: Array,
default: () => []
}
},
//如果你的 type 是 Object,你需要这么写
default: () => ({})
而不是
default: () => {}
工具插件类
vConsole移動端输出工具
charles移動端抓包工具
vue-bus
Vue Devtools
CSS 动画库,Animate.css
JavaScript 动画库, Velocity.js
lodash
bable-polyfill
npm安装,main.js里import或其他引入方式
import "babel-polyfill";
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而可以在现有环境执行。所以你可以用ES6编写,而不用考虑环境支持的问题。但是Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
lyric-parser
歌词解析库,用来将接口返回的歌词数据解析成需要的类型
import Lyric from "lyric-parser";
good-storage
本地存储功能的库,用来对localStorage或sessionStorage进行操作
import storage from "good-storage"
js-base64
fastclick
原理:在检测到touchend事件的时候,会通过DOM自定义事件立即触发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉
import fastclick from "fastclick";
fastclick.attach(document.body);
create-keyframe-animation
import animations from ‘create-keyframe-animation’
import animations from 'create-keyframe-animation'
animations.registerAnimation
//在after-enter或after-leave中注销动画
animations.unregisterAnimation('move')
this.$refs.cdWrapper.style.animation = ''
vue-lazyload
//main.js下
import VueLazyLoad from "vue-lazyload";
Vue.use(VueLazyLoad, {
loading: require("common/image/default.png"),
});
better-scroll
jsonp
createLogger
import createLogger from "vuex/dist/logger";
plugins: debug ? [createLogger()] : [], //new Vuex.Store里添加