vue知识点1
vue知识点（1）
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 键）