v-if和v-for为什么不能一起使用

为什么v-for和v-if不能能同时使用

永远不要把 v-if 和 v-for 同时用在同一个元素上。 
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级
所以vue会先循环所有数据在进行判断,影响性能
如何解决这个问题,可以使用计算属性

修饰符使用

passive

设置 addEventListener 中的 passive 选项
能够提升移动端的性能
2.3.0新增
即使在触发触摸事件时，执行了一个空的函数，也会让页面卡顿。因为浏览器不知道监听器到底会不会阻止默认事件，所以浏览器要等到执行完整个函数后，才能决定是否要滚动页面。passive事件监听器，允许开发者告诉浏览器，监听器不会阻止默认行为，从而浏览器可以放心大胆的滚动页面，这样可以大幅度提升移动端页面的性能，因为据统计只有20%的触摸事件会阻止默认事件。
.passive 会告诉浏览器你不想阻止事件的默认行为

使用修饰符注意事件

使用修饰符时，顺序很重要。相应的代码会以同样的顺序产生。
因此， v-on:click.prevent.self 会阻止所有的点击的默认事件 v-on:click.self.prevent 只会阻止对元素自身点击的默认事件
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

key的作用

key的例子

Vue更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素：
例：
<ul id="app">
  <li v-for="(person, index) in persons">
    {{ person }}
    <input type="text" />
    <button @click="handleClick(index)">下移</button>
  </li>
</ul>
const vm = new Vue({
  el: '#app',
  data: {
    persons: ['shan', 'jc', 'cst', 'deng']
  },
  methods: {
    handleClick (index) {
      const deleteItem = this.persons.splice(index, 1);
      this.persons.splice(index + 1, 0, ...deleteItem);
    }
  }
})
官方解释：
在"就地复用"策略中，点击按钮，输入框不随文本一起下移，
是因为输入框没有与数据绑定，所以vuejs默认使用已经渲染的dom，
然而文本是与数据绑定的，所以文本被重新渲染。
这种处理方式在vue中是默认的列表渲染策略，因为高效。
这个默认的模式是高效的，但是在更多的时候，我们并不需要这样去处理，
所以，为了给Vue一个提示，以便它能跟踪每个节点的身份，
从而重用和重新排序现有元素，我们需要为每项提供一个唯一key特性，
Vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

通俗的讲：
在没有使用key的时候点击按钮往下移动，input是不会跟着往下移动，
因为vue内部为了减少操作dom提高性能，所有默认input都是一样的就不会去改变，
加上key后就相当于和前面的文本绑定一起都是唯一的，所有就会跟着文本一起移动

key的使用方法

number | string 有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误，key应唯一。
不建议将数组的索引作为key值