最近打算做一个项目，涉及到一些前端的知识，因上一次接触前端已经是三四年前了，所以捡一些简单的功能做一下复习。
- 响应式函数：reactive 和 ref
- 属性绑定：v-bind 和简写语法
- 事件监听：v-on 和简写语法 @
- 双向绑定：v-model]
- 条件渲染：v-if, v-else, v-else-if
- 列表渲染：v-for 和 key
- 生命周期钩子：onMounted, onUpdated, onUnmounted
- 侦听器：watch
- 父子组件：props 和 emit
- 插槽：Slots
响应式函数：reactive 和 ref
reactive
Vue 的 reactive() API 用于声明响应式对象。它通过 JavaScript 的 Proxy 实现，能够使对象（包括数组和 Map、Set）的属性响应式：
import { reactive } from 'vue'
const counter = reactive({
count: 0
})
console.log(counter.count) // 0
counter.count++
reactive()适用于对象类型的数据。- 创建的对象是深度响应式的，修改任何嵌套的属性都会自动更新视图。
ref
ref() 用于声明响应式的基本数据类型（如字符串、数字、布尔值等）或复杂类型。ref() 返回的对象有一个 .value 属性来存储值。
import { ref } from 'vue'
const message = ref('Hello World!')
console.log(message.value) // "Hello World!"
message.value = 'Changed'
ref用于包裹值，特别是基本数据类型。
注意事项：
reactive与ref的选择：reactive用于对象、数组，ref用于基本数据类型（以及其他对象类型）。ref的值不可直接修改，必须通过.value。reactive的对象不支持直接解除响应式，但可以通过替换整个对象来解除响应式。
属性绑定：v-bind 和简写语法 :
v-bind 语法
v-bind 用于动态绑定属性，它可以绑定 JavaScript 表达式到元素的特性：
<div v-bind:id="dynamicId"></div>
简写形式为 :：
<div :id="dynamicId"></div>
注意事项：
- 动态绑定可以用于
class、style、id等 HTML 属性。 - 绑定对象时，Vue 会自动合并类和样式。
事件监听：v-on 和简写语法 @
v-on 语法
v-on 用于监听 DOM 事件，通常用来绑定事件处理器：
<button v-on:click="increment">{{ count }}</button>
简写形式为 @：
<button @click="increment">{{ count }}</button>
注意事项：
.once修饰符：只触发一次事件。.prevent和.stop修饰符：阻止默认行为和事件冒泡。
双向绑定：v-model
v-model 语法
v-model 用于实现双向绑定，将表单控件的值与组件状态同步：
<input v-model="text">
v-model自动处理绑定和事件监听的工作，不需要手动写事件监听器。
自定义 v-model
v-model 允许自定义绑定属性和事件名称：
<ChildComp v-model:customProp="data"></ChildComp>
条件渲染：v-if, v-else, v-else-if
v-if 语法
v-if 用于根据条件渲染元素：
<h1 v-if="awesome">Vue is awesome!</h1>
v-if只会在条件为真时渲染元素。
注意事项：
v-if会移除 DOM 元素，因此适用于不常更改的条件。- 使用
v-show代替v-if时，性能较好，因为它只改变元素的display样式。
列表渲染：v-for 和 key
v-for 语法
v-for 用于渲染数组或对象的列表：
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
key是必需的，它帮助 Vue 跟踪每个元素，优化渲染性能。
注意事项：
key的作用是确保每个元素的唯一性，帮助 Vue 更高效地更新 DOM。- 在渲染对象时，最好将对象转换为数组进行渲染。
生命周期钩子：onMounted, onUpdated, onUnmounted
onMounted
onMounted 钩子在组件挂载到 DOM 后调用。它常用于操作 DOM 或执行异步请求。
import { onMounted } from 'vue'
onMounted(() => {
console.log('Component is mounted');
});
注意事项：
onMounted在组件首次渲染后调用，不会在子组件的渲染前调用。- 可以使用
onBeforeMount和onAfterMount来控制组件挂载过程。
侦听器：watch
watch 语法
watch 用于响应式地监听数据变化：
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newValue, oldValue) => {
console.log('Count changed:', newValue)
})
深度侦听
可以通过设置 deep: true 来深度监听对象的嵌套属性：
watch(myObject, (newVal) => {
console.log('Object changed', newVal);
}, { deep: true })
父子组件：props 和 emit
props 语法
父组件可以通过 props 向子组件传递数据：
<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
msg: String
})
</script>
emit 语法
子组件通过 emit 向父组件触发事件：
<script setup>
const emit = defineEmits(['response'])
emit('response', 'Hello from child')
</script>
注意事项：
props可以设置类型验证、默认值等属性。emit支持传递多个参数，可以定义事件名称和类型。
插槽：Slots
默认插槽
父组件通过插槽向子组件传递内容：
<ChildComp>
This is some slot content!
</ChildComp>
子组件通过 <slot> 显示插槽内容：
<!-- ChildComp.vue -->
<slot />
具名插槽
可以使用具名插槽来区分不同的内容：
<ChildComp>
<template #header>Header content</template>
<template #footer>Footer content</template>
</ChildComp>
作用域插槽
子组件可以将数据暴露给父组件的插槽：
<ChildComp>
<template #default="{ data }">
<p>{{ data }}</p>
</template>
</ChildComp>
