为什么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值
Logo

前往低代码交流专区

更多推荐