v-if, v-show

[[生命周期#v-if 和 v-show]]

• v-if 的条件真假与否决定了切换时监听器和相应子组件会被销毁及重建，具有更高的切换开销
• v-show 无论结果如何，一开始都会被渲染，只是通过 CSS 的 display 属性控制显示与否，相对来说在初始渲染过程中需要一定的开销
• 优先级大于 v-for ，因此 v-if 不能访问到 v-for 的作用域，（如果要这么做的话，只要把 v-if 嵌套到 v-for 内即可）。

v-for

遍历对象

<template>
    <li v-for="(item,key,index) in a">
    //属性值，属性名称，位置索引[0,1,2...]
        {{ key }} - {{ item }} - {{ index }}
    </li>
</template>

<script setup lang='ts' name='test'>
import { ref, reactive} from 'vue'

let a = reactive({
    a:114514,
    b:1919810,
    c:510
})
</script>

范围值

<span v-for="n in 10">{{ n }}</span>
<!--输出12345678910-->

这个范围初始值是 1

key 状态管理

在使用 vue 的 v-for 指令进行列表渲染的时候，每个被渲染的元素都需要有一个唯一的 key 值。这个 key 值可以是任何可以唯一标识元素的值，比如说数据中的 id 字段。 同时可以帮助框架更精准地操作 DOM，优化性能。

<div v-for="item in items" :key="item.id"></div>

在组件上使用 v-for

没有什么特殊的，只不过数据要手动通过 props 传递给子组件。

<MyComponent v-for="(item, index) in items" :item="item" :index="index" :key="item.id" />

数组变化侦测

变更方法

框架会监听变更方法（引起数组数据发生改变的方法）的调用，并完成相应变更的 DOM 更新。 如果是非变更方法，则需要替换整个数组，但是反映在真实 DOM 上，重复的元素的 DOM 会被复用，因此用一个含有一定重复项的数组替代原数组也是一个较为高效的操作。

items.value = items.value.filter((item) => item.message.match(/Foo/))

展示过滤或排序后的结果

希望显示一个数组经过某些操作后得到的结果而不修改原始数组，可以通过计算属性得到这个结果，然后使用 v-for 遍历计算属性即可。 如果使用计算属性不方便时，比如多重 v-for（因为此时可能在遍历不同对象的不同属性，计算属性只能缓存特定的结果）

const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])

function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

• 不要在计算属性中使用能够改变原始数组的方法