ref和reactive的区别

ref

用途：用于创建一个响应式的基本类型（string、number、boolean）或者引用类型（object、array）的数据。
返回值：返回一个带有.value属性的对象，访问或者修改数据时需要通过.value进行。
使用场景：适合处理单个值或需要明确访问.value的场景。

reactive

用途：用于创建一个响应式的对象或者数组。
返回值：返回一个响应式的Proxy对象，可以直接访问或修改属性，无需.value。
使用场景：适合处理复杂对象或者嵌套数据结构。

注意：在一个对象或者数组中，如果想要访问更深层的属性或者元素，推荐使用reactive
使用reactive只需要通过obj.a.b.c或arr[0].name的方式访问深层属性或元素，不需要额外的.value
使用ref则需要通过obj.value.a.b.c或arr[0].value.name的方式访问深层属性或元素

计算属性

计算属性是通过 computed 函数创建的。
计算属性默认是只读的，但可以通过定义 get 和 set 函数来创建一个可写的计算属性。
get 用于获取计算属性的值。 set 用于设置计算属性的值。

<template><div><h1>{{ alwaysSmall }}</h1>//这时+1不是改变alwaysSmall的值，只是显示时alwaysSmall的值+1<h1>{{ alwaysSmall + 1 }}</h1></div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { onMounted } from 'vue'const count = ref(2)const alwaysSmall = computed({//get(previous)：获取当前值的方法。get(previous) {console.log('previous', previous)// 这个计算属性在 count 的值小于或等于 3 时，将返回 count 的值。// 当 count 的值大于等于 4 时，将会返回满足我们条件的最后一个值// 直到 count 的值再次小于或等于 3 为止。if (count.value <= 3) {return count.value}return previous},//set(newValue)：设置当前值的方法。当外部尝试修改alwaysSmall的值时，此方法会被调用。它将count设置为新值的两倍。set(newValue) {console.log('newValue', newValue)count.value = newValue * 2},
})onMounted(() => {console.log(alwaysSmall.value)//在外部修改alwaysSmall的值alwaysSmall.value = 10
})
</script>

注意： 计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。

v-if 和 v-show

v-if

条件性地添加或移除 DOM 元素。

v-show

通过 CSS 的 display 控制显示和隐藏（display: none），元素始终会被渲染到 DOM 中

注意：当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。

事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。
event.preventDefault() 和 event.stopPropagation() 是用于控制事件行为的两个重要方法。它们在处理 DOM 事件时非常有用，尤其是在需要阻止默认行为或阻止事件冒泡的场景中。
事件修饰符是用 . 表示的指令后缀。
常用的事件修饰符：
.stop：阻止事件冒泡。

<template><div @click="parentClick">//点击按钮时，只会触发 childClick，不会触发 parentClick。<button @click.stop="childClick">点击我</button></div>
</template>

.prevent：阻止默认行为。

<template>//在表单提交时，浏览器的默认行为是刷新页面。//使用 .prevent 修饰符来阻止默认行为，在表单提交时不刷新页面。<form @submit.prevent="onSubmit"><input type="text" v-model="name" /><button>提交</button></form>
</template><script setup lang="ts">
import { ref } from 'vue'
const name = ref('')
const onSubmit = () => {console.log('表单提交，但不刷新页面')
}
</script>

.self：只有当事件是从当前元素触发时才会调用事件处理函数。

<template>//一般情况下点击子元素会冒泡触发父元素上的事件  //使用.self后，点击按钮时，只会触发 childClick。//使用.self后，点击父元素时，才会触发 parentClick。<div @click.self="parentClick"><button @click="childClick">点击我</button></div>
</template><script setup>
const parentClick = () => {console.log('父元素点击')
}
const childClick = () => {console.log('子元素点击')
}
</script>

.capture：使用捕获模式监听事件。默认情况下，事件是从内向外冒泡的，使用 .capture 后，事件会从外向内捕获。

<template>//点击按钮时，先触发 parentClick，再触发 childClick。<div @click.capture="parentClick"><button @click="childClick">点击我</button></div>
</template><script setup>
const parentClick = () => {console.log('父元素点击')
}
const childClick = () => {console.log('子元素点击')
}
</script>

.once：事件只会触发一次。

<template>//点击事件最多被触发一次 onClick 方法<button @click.once="onClick">点击我</button>
</template><script setup>
const onClick = () => {console.log('点击事件只触发一次')
}
</script>

.passive：提升滚动事件的性能，告诉浏览器不要阻止事件的默认行为。一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能

<template>//滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成<div @scroll.passive="onScroll" style="height: 200px; overflow: auto"><div style="height: 1000px">滚动我</div></div>
</template><script>
const onScroll = () => {console.log('滚动中')
}
</script>

按键修饰符

.enter

监听回车键。

<template><input @keyup.enter="onEnter" placeholder="按下回车">
</template><script setup lang="ts">
const onEnter = () => {console.log('按下回车')
}
</script>

.esc

监听 Esc 键。

<template><input @keyup.esc="onEsc" placeholder="按下 Esc">
</template><script setup>
const onEsc = () => {console.log('按下 Esc')
}
</script>

其他常用按键修饰符：
.tab、.delete、.space、.up、.down、.left、.right

系统按键修饰符

.ctrl

监听 Ctrl 键。

<template><button @click.ctrl="onCtrlClick">按住 Ctrl 点击我</button>
</template><script setup>
const onCtrlClick = () => {console.log('按住 Ctrl 点击')
}
</script>

.alt

监听 Alt 键。

<template>// Alt + Enter，修饰语可以使用链式书写<input @keyup.alt.enter="clear" />
</template><script setup>
const clear = () => {console.log('Alt + Enter')
}
</script>

注意：使用链式书写修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。

其他系统修饰键：
.shift、.meta（Windows 上是 Win 键，Mac 上是 Command 键）