[TOC]
vue3中常用语法
1. 子组件调用父组件方法
1.1 子组件使用$emit
父组件：
<template>
<ChildComponent @call-parent-method="parentMethod" />
</template>
<script setup>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';
const parentMethod = () => {
console.log('This is a parent method');
};
</script>
子组件：
<template>
<button @click="$emit('call-parent-method')">Call Parent Method</button>
</template>
<script setup>
import { defineComponent, defineEmits } from 'vue';
const emit = defineEmits(['call-parent-method']);
const handleOk = () => {
emit('call-parent-method'); // 在JS里面调用
}
</script>
2. 语法相关
2.1 const 和 let 声明 ref(false) 区别
使用 const 和 let 声明 ref(false) 的区别主要体现在变量的重新赋值能力上，而不是 ref 的响应性。ref 的响应性是由 Vue 内部管理的，与变量的声明方式无关。
const 声明
变量不可重新赋值：使用
const声明的变量不能被重新赋值。ref的值可以修改：虽然变量本身不能被重新赋值，但ref的.value属性可以被修改。let 声明
变量可重新赋值：使用
let声明的变量可以被重新赋值。ref的值可以修改：ref的.value属性同样可以被修改。最佳实践：
- 如果不需要重新赋值，推荐使用
const，因为它更符合函数式编程的不可变性原则，代码更安全、更易读。 - 如果需要重新赋值（例如动态切换
ref对象），则使用let。
- 如果不需要重新赋值，推荐使用
import { ref } from 'vue';
const isVisible = ref(false);
isVisible.value = true; // 合法，ref 的值可以被修改
isVisible = ref(true); // 非法，const 声明的变量不能被重新赋值
let isVisible = ref(false);
isVisible.value = true; // 合法，ref 的值可以被修改
isVisible = ref(true); // 合法，let 声明的变量可以被重新赋值
2.2 const 和 let 声明 reactive 区别
使用 const 和 let 声明 reactive 对象时，主要区别在于变量的重新赋值能力，而不是 reactive 对象本身的响应性。
- const 声明
- 不可重新赋值：使用
const声明的变量不能被重新赋值。 - 对象可变：虽然变量本身不能被重新赋值，但对象的属性可以被修改。
- 不可重新赋值：使用
- let 声明
- 可重新赋值：使用
let声明的变量可以被重新赋值。 - 对象可变：对象的属性同样可以被修改。
- 可重新赋值：使用
- 最佳实践：在大多数情况下，推荐使用 const 声明 reactive 对象，除非你有明确的理由需要重新赋值。
import { reactive } from 'vue';
const state = reactive({ count: 0 });
state.count = 1; // 合法，对象的属性可以被修改
state = reactive({ count: 2 }); // 非法，const 声明的变量不能被重新赋值
let state = reactive({ count: 0 });
state.count = 1; // 合法，对象的属性可以被修改
state = reactive({ count: 2 }); // 合法，let 声明的变量可以被重新赋值
3. vue3核心语法相关
3.1 dom元素动态绑定 ref 到响应式对象
在 Vue 3 中，动态绑定 DOM 元素的 ref 可以通过以下两种常见方式实现，尤其是在需要根据动态变量（比如循环中的索引或数据标识）管理引用时：
3.1.1 方法 1：使用函数形式的 ref（推荐）
在模板中通过函数动态绑定 ref，并将 DOM 元素保存到响应式对象中。
<template>
<div
v-for="item in items"
:key="item.id"
:ref="(el) => setDynamicRef(el, item.id)"
> {{ item.text }} </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
// 响应式对象保存动态 ref
const dynamicRefs = reactive({});
// 将 DOM 元素绑定到 dynamicRefs
const setDynamicRef = (el, id) => {
dynamicRefs[id] = el; // 自动处理 el 为 null 时的卸载逻辑
};
// 示例数据
const items = ref([
{ id: 'a', text: 'Item 1', dom: null },
{ id: 'b', text: 'Item 2', dom: null },
]);
</script>
特点：
- 动态性：通过
item.id等唯一标识管理引用，避免冲突。 - 自动清理：当元素卸载时，Vue 会自动调用
ref函数并传入null，无需手动清理。 - 响应式存储：使用
reactive或ref对象存储 DOM 引用，方便后续操作。
3.1.2 方法 2：结合 v-for 和数组保存多个 ref
<template>
<div
v-for="(item, index) in items"
:key="item.id"
:ref="(el) => (item.dom = el)"
> {{ item.text }} </div>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
{ id: 'a', text: 'Item 1', dom: null },
{ id: 'b', text: 'Item 2', dom: null },
]);
</script>
3.1.3 如果动态绑定的是组件
<ChildComponent :ref="(comp) => (childRef = comp)" />