vue的一些坑

一、v-for里的v-bind:key

因为v-for是用来循环遍历操作dom结构，而v-bind：key是通过绑定每一组DOM结构的key值来操作DOM；
而为什么必须要用这个key，原因是key的唯一性，在对大量节点进行DOM操作时（比如，插入或删除新节点），这时如果没有key
，就只能顺序一一查找或更改，就会存在效率问题；而有唯一性的key存在（类似hash查找），（1）引擎就能准确快速找到要操作节点，
（2）并且在通过唯一key插入删除节点后，也不需要改变其他节点的索引或者说位置，所以更加高效。
所以这也是为什么在循环时key绑定id比绑定数组index要好；

二、 v-if 和 v-for是否可以同时使用？

可以是可以，但是会影响效率；
原因：v-for的优先级高于v-if，所以在执行多次循环渲染DOM时，即便不满足if条件的DOM也会先执行循环渲染出来再执行v-if，
实属没有必要；
解决：
（1）这是便可以利用computed模块的特性，也就是我们可以在computed模块中提前封装好一个方法，尽管每一次for循环都要
调用一次这个方法，但是实际引擎在第一次调用后就机智地把值藏在了一个好地方，以后的每一次for循环只是调用return的值，nice！
（2）或者在一些条件下可以在外层先判断v-if
举例 ( 方法一 )

<ul>
 <li v-for="user in users" v-if="user.isActive" :key="user.id">
 {{ user.name }}
 </li>
</ul>

<div>
    <div v-for="(user,index) in activeUsers" :key="user.index" >
        {{ user.name }} 
    </div>
</div>
data () {  // 业务逻辑里面定义的数据
    return {
      users,: [{
        name: '111111',
        isShow: true
      }, {
        name: '22222',
        isShow: false
      }]
    }
  }
computed: {
    activeUsers: function () {
        return this.users.filter(function (user) {
            return user.isShow;//返回isShow=true的项，添加到activeUsers数组
        })
    }
}