响应式基础

声明响应式状态

1. ref()
2. <script setup>
3. DOM 更新时机

reactive()

还有另一种声明响应式状态的方式，即使用 reactive() API。

条件渲染

<template> 上的 v-if

最后渲染的结果并不会包含这个 <template> 元素。

v-if 和 v-for

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显,同时存在时v-if 会首先被执行。 在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题。

数组变化侦测

变更方法

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替换一个数组

例如 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：

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

展示过滤或排序后的结果

1. 可以创建返回已过滤或已排序数组的计算属性。

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

const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0)
})
// template
<li v-for="n in evenNumbers">{{ n }}</li>

2. 在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，你可以使用filter方法。

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

function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}
// template
<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

3. 在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：

- return numbers.reverse() // 错误写法
+ return [...numbers].reverse() // 正确写法

事件处理

事件修饰符

• .stop ：单击事件将停止传递
• .prevent ：提交事件将不再重新加载页面
• .self ：事件处理器不来自子元素（仅当 event.target 是元素本身时才会触发事件处理器）
• .capture ：指向内部元素的事件，在被内部元素处理前，先被外部处理（添加事件监听器时，使用 capture 捕获模式）
• .once ：点击事件最多被触发一次
• .passive ：滚动事件的默认行为 (scrolling) 将立即发生而非等待 onScroll 完成。以防其中包含 event.preventDefault()。用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

生命周期钩子

侦听器

watchEffect()