第十周（11.18-11.24）学习笔记 24软工陈奕君

学习收获：

继续学习Vue3

学习笔记：

生命周期

import { onMounted, onUpdated, onUnmounted } from 'vue';
​
onMounted(() => {
  console.log('组件挂载完毕');
  // DOM 操作、数据请求
});
​
onUpdated(() => {
  console.log('组件更新完毕');
});
​
onUnmounted(() => {
  console.log('组件卸载之前');
  // 清理工作、取消订阅
});

自定义 Hook

// useCounter.js
import { ref } from 'vue';
​
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initialValue;
  
  return { count, increment, decrement, reset };
}
​
// 使用
import { useCounter } from './useCounter';
const { count, increment } = useCounter();

组件通信

<script setup>
// Props 接收
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    required: true
  }
});
​
// 发射事件
const emit = defineEmits(['update', 'delete']);
​
// 暴露方法给父组件
defineExpose({
  someMethod() {
    // 方法实现
  }
});
</script>
​
<!-- 父组件使用 -->
<ChildComponent 
  :list="userList" 
  title="用户列表"
  @update="handleUpdate"
  @delete="handleDelete"
  ref="childRef"
/>