5.9 getters监测变化问题，getBoundingClientRect()，slice深拷贝，vue检测变化问题

1、如下vuex中getters的一段代码。

export const currentIndex = state => state.currentIndex
export const currentSong = state => {
  return state.playlist[state.currentIndex] || {}
}

currentSong由playlist 以及 currentIndex 两者共同控制。
但是在实例中，发现改变playlist并不能使getters监测到变化并重新计算。而currentIndex可以实时变化。原理不详，留作提醒。

2、getBoundingClientRect()获取元素距视窗的位置集合。
如果是left，则是元素的右侧（包含margin-right）最终距视口的位置。


3、对数组的深度拷贝最实用的就是slice

  let _arr = arr.slice() // 副本

4、vue的检测变化问题
我们知道 vue是双向数据绑定，在数据层发生变化时，会渲染到指定的dom层，完成一次修改。
但是有些表面现象的变化，未必会使数据层监听到。
比如以下两种代码

// 第一种
export function shuffle(arr) {
  let _arr = arr  // _arr即arr，浅拷贝，
  for (let i = 0; i < _arr.length; i++) {
    let j = getRandomInt(0, i)
    let t = _arr[i]
    _arr[i] = _arr[j]
    _arr[j] = t
  }
  return _arr
}
// 第二种
export function shuffle(arr) {
  let _arr = arr.slice() // 深度拷贝成副本
	...此处一模一样故省略。
}

如果传入的实参是 this.list 是一个$el下dom元素的数据data。
第一种情况数据的改变不会被检测到，
第二种情况会被检测到。
个人浅分析：
是因为this.list是进行了数据的内部排序，生成新的数组。监察系统不会检测自身的排序行为。（仅遇到排序未检测，其余不详）
而副本拷贝，是对拷贝出的新数组排序，再讲新数组重新赋予this.list 当然会被检测。