Vue开发技巧（避免踩坑） ---- 持续更新

一、数组更新检测

在Vue中操作数组，当你使用索引设置一个项，例如 vm.items[index] = newVal，或者修改数组长度，例如vm.item.lenghts = newLenghts，因为javascript的限制，将能不能触发状态更新，但是你可以使用如下方法触发更新

// 第一个问题
Vue.set(items, indexOfItem, newVal)
// or 
items.splice(indexOfItem, 1, newVal)

// 第二个问题
item.splice(newLength)

同时，以下的数组API都会触发状态更新

push(), pop(), shift(), unshift(), splice() (上面有演示), sort(), reverse()

我曾经在一个项目中直接使用索引去操作数组，结果被坑了10分钟，谨记谨记。
还有剩下一些例如 fitler(), concat(), slice() 。这些方法不会改变原始数组，但总是返回一个新数组，所以可以用新数组替代旧数组。或许你会认为这样Vue会丢弃现有DOM并重新渲染整个列表，事实上Vue为了使DOM元素得到最大范围的重用使用了一些智能的，启发式的方法，所以用一个含有相同元素的数组去替换原来的数组非常高效。

二、for循环加key

开发中有时会碰到 Vue提示，for循环里缺少key，其实这个key加不加是不会影响程序正常运行的，但是加了之后又有什么好处呢，这里主要涉及虚拟DOM的Diff算法，看图

我们想在dom B，C之间插入dom F，如果没有key，默认的diff算法执行如下

节点不变，只更新里面的属性内容，把c换成f，d换成c，e换成d，然后创建一个e插入最后，如果有100，1000条数据，我如果在第二个位置插一个数据，想一下这个计算量是很多的。
但是有了key之后，就大不一样了，看图

每个节点都有自己唯一的key，新的节点直接根据位置插入节点，是不是很快，但是key也不是必须要的，但是如果操作大量数据频繁变化时，就要用上key啦~

三、v-show,v-if的动态监测

开发中，如果我们对v-show，if的状态判断为返回一个函数如

<h1 class="title" v-if="test()">商品评价</h1>

<script>
methods: {
  test () {
    if (this.onlyContent) {
      console.log('我被触发了')
      return true
      }  
   }
 },
created () {
  setInterval(() => {
    this.onlyContent = !this.onlyContent
    console.log(this.onlyContent)
  }, 1000)
}
</script>

如果我们在test方法中对onlyContent的状态进行了判断，那么此时的onlyContent处于被监听的状态(就像在watch里)，如果onlyContent的状态发生了改变，那么test方法将会被再次执行，这样就减轻了多余的watch监听。我在created 的时候添加一个定时器，效果就是test函数每隔1s就会被触发一次。