Vue 3 学习文档（一）

最近打算做一个项目，涉及到一些前端的知识，因上一次接触前端已经是三四年前了，所以捡一些简单的功能做一下复习。

1. 响应式函数：reactive 和 ref
2. 属性绑定：v-bind 和简写语法
3. 事件监听：v-on 和简写语法 @
4. 双向绑定：v-model]
5. 条件渲染：v-if, v-else, v-else-if
6. 列表渲染：v-for 和 key
7. 生命周期钩子：onMounted, onUpdated, onUnmounted
8. 侦听器：watch
9. 父子组件：props 和 emit
10. 插槽：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>