Vue-music项目笔记

踩坑

[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里添加