逻辑渲染

<template> 上的 v-if

如果要使用v-if切换多个元素，就可以用 <template> 包裹：

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

注意事项

v-show 不支持在 <template> 元素上使用

不推荐同时使用 v-if 和 v-for，因为二者的优先级不明显；

当 v-if 和 v-for 同时存在于一个元素上时，v-if 的优先级高，这意味着 v-if 会首先被执行，且无法访问到 v-for 作用域内的变量：

v-for

通过参数二获取索引

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

直接解构对象元素

<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

可使用 of 替代 in，作用相同：

<div v-for="item of items"></div>

遍历对象属性，参数二为属性名，参数三为索引：

<li v-for="(value, key,index) in myObject">
  {{ key }}: {{ value }}
</li>

在模板上使用v-for：

<template v-for="item in items">
  <li>{{ item.msg }}</li>
  <li class="divider" role="presentation"></li>
</template>

v-for的key

为每个元素提供一个节点标识key，从而使Vue能够重用和重新排序现有的元素；

数组变化侦测

Vue 能够侦听方法包括：push()、pop()、shift()、unshift()、splice()、sort()、reverse()，因为这些方法是修改原数组；

也有一些无法侦听的方法，如：filter()、concat()、slice()，因为这些方法不会更改原数组，而是返回新数组。

注意事项

如果欲遍历的数据来自计算属性，则千万不要在计算属性中修改原数组，否则会导致计算属性被循环计算：

const numbers = ref([1, 2, 3, 4, 5]) 

const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0)
})

// 模板
<li v-for="n in evenNumbers">{{ n }}</li>