music功能 vue_Vue 实现的音乐项目 music app 知识点总结分享

其他

此应用的全部数据来自 QQ音乐，利用 axios 结合 node.js 代理后端请求抓取

全局通用的应用级状态使用 vuex 集中管理

全局引入 fastclick 库，消除 click 移动浏览器 300ms 延迟

页面是响应式的，适配常见的移动端屏幕，采用 flex 布局

疑难总结 & 小技巧

关于 Vue 知识 & 使用技巧

v-html 可以转义字符，处理特定接口很有用

watch 对象可以观测 属性 的变化

像这种父组件传达子组件的参数通常都是在data()里面定义的，为什么这里要放到created()定义，两者有什么区别呢？

因为这个变量不需要观测它的变化，因此不用定义在 data 里，这样也会对性能有所优化

不明白什么时候要把变量放在data()里，什么时候又不需要放 ？

需要监测这个数据变化的时候，放在 data() 里，会给数据添加 getter 和 setter

生命周期 钩子函数

生命周期钩子函数，比如 mounted 是先触发子组件的 mounted，再会触发父组件的 mounted，但是对于 created 钩子，又会先触发父组件，再触发子组件。

销毁计数器

如果组件有计数器，在组件销毁时期要记得清理，好习惯

对于 Vue 组件，this.$refs.xxx 拿到的是 Vue 实例，所以需要再通过 $el 拿到真实的 dom

关于 JS 知识 & 技巧

setTimeout(fn, 20)

一般来说 JS 线程执行完毕后一个 Tick 的时间约17ms内 DOM 就可以渲染完毕所以课程中 setTimeout(fn, 20) 是非常稳妥的写法

关于 webpack 知识 & 技巧

" ~ " 使 SCSS 可以使用 webpack 的相对路径

@import "~common/scss/mixin";

@import"~common/scss/variable";

babel-runtime 会在编译阶段把 es6 语法编译的代码打包到业务代码中，所以要放在dependencies里。

Fast Click 是一个简单、易用的库，专为消除移动端浏览器从物理触摸到触发点击事件之间的300ms延时

为什么会存在延迟呢？

从触摸按钮到触发点击事件，移动端浏览器会等待接近300ms，原因是浏览器会等待以确定你是否执行双击事件

何时不需要使用

FastClick 不会伴随监听任何桌面浏览器

Android 系统中，在头部 meta 中设置 width=device-width 的Chrome32+ 浏览器不存在300ms 延时，所以，也不需要

同样的情况也适用于 Android设备(任何版本)，在viewport 中设置 user-scalable=no，但这样就禁止缩放网页了

IE11+ 浏览器中，你可以使用 touch-action: manipulation; 禁止通过双击来放大一些元素(比如：链