5.19 方法计算属性开销大，oncanplay和play区别，涉及延迟的事件务必小心，旧vue-cli2.0编译'compilation'问题（build图片路径问题），vue基础network相关

1、计算属性带有缓存（一旦模型变化，才会执行）。而方法不会缓存，方法计算属性会检测组件内的全部dom变化。一旦任意一个模型变化，方法计算属性便会重新渲染。经实践，方法一旦和表达式相挂钩，在dom运行期间产生的所有变化，都会触发计算属性方法的监听。所以如下代码

methods:{
	// 方法计算属性
    getFavoriteIcon (song) {
		console.log("监听")
    }
  }

因为播放器一直在改变模型，所以方法计算属性就会持续重新渲染。开销较大。

2、媒体事件oncanplay和onplay

oncanplay script 当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
onplay script 当媒介已就绪可以开始播放时运行的脚本。

简言之，oncanplay是当缓存足够时便派发。（可能还未播放，触发时机短）
而onplay是当媒介已开始播放，才派发。（开始播放后，触发等待时间长）
但是经测试，如果play.src渲染是同一个源，onplay并不会再次执行。
而oncanplay就会再次执行
综上： 其实oncanplay够用了，且较稳定。

3、一旦涉及异步执行的事件，或者延迟事件，包括this.$nextTick(() => {})，可能会引发错误，因为异步事件的异常，会导致程序的执行顺序上下文错乱，需小心。我在播放器频繁切歌时，发现歌词的变化包含着多个变化，经大佬分析，是因为getLyric是异步操作，当歌曲已成功渲染，但是歌词还在异步获取，所以可以点击下一首，但是当歌词获取到的时候，你已经切歌了，导致歌词夹杂多个，而清理歌词只能清1个，所以歌词会跳来跳去，即包含多个歌词计时器。
解决方案一： 当歌词渲染完毕情况，移出标志位。
解决方案二：异步操作获取Promise.resolve时，判断lyric和this.currentSong.lyric是否相同，如果不相同则说明是点击过快导致应答残留，直接return即可。

4.1、当安装@vue/cli最新版本时，使用老方法构建的项目会存在版本不一致，编译打包失败的问题，解决办法还是降devDependence的库版本。

转载某某大佬的博文，解决旧版本vue-cli打包问题。
https://blog.csdn.net/u011169370/article/details/83346176

4.2旧vue-cli2.0+build完工程后，图片路径报错

解决方案：

解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。
publicPath:’…/…/’

但是vue-cli3.0+已经优化了打包路径。只有production和 dev的区别。

module.exports = {
  lintOnSave: false,
  // 生产环境使用相对路径
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/'
  }

5、vue build完项目后，可以自行起一个node服务进行环境还原检测，同时我们可以查看network。

manifest是维护我们静态资源的一个清单
有了manifest才能保证每次build时候，vendor的哈希是一样的。
vendor是根据modules生成的
app是根据源码生成的文件