vue3学习

1. 响应式数据

	const searchFormState = reactive({})
	const searchFormRef = ref()
1
2

两者差不多，reactive(）多用于复杂数据结构 ref()多用与简单数据结构

3. 组件传值

   父传子

   属性传值 父组件给子组件传值属性aa值为data :aa="data"
   子组件接收数据方法 引入defineProps

   const props = defineProps({
   		// 可以拿到它的值
   		aa: {
   			type:Boolean,
   			default: false
   		},
   
   	})
   1
   2
   3
   4
   5
   6
   7
   8

   使用 const bb = props.aa

   子传父

   子组件使用事件触发 引入defineEmits

   	// 定义emit事件
   	const emit = defineEmits({ checkedItem: null, checkedGroupListItem: null })
   	....
   	///触发checkedItem事件，传递item数据
   	emit('checkedItem', item)
   1
   2
   3
   4
   5

   父组件监听

	const checkedItem=(item)=>{
		...
	}
1
2
3

子组件中的方法需要暴露出去才能被父组件调用

	```
	// 在子组件中抛出 onOpen方法
		defineExpose({
			onOpen
		})
	```
	
	```
	//父组件中可通过ref调用
	`
	const aaRef= ref()
	
	aaRef.onOpen(record)
	
	```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5. 生命周期

   Vue3 的生命周期函数包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 等。

   beforeCreate 函数是整个 Vue3 实例创建的第一个生命周期函数它会在实例初始化之前调用，可以用来对实例进行初始化，在这个函数里可以定义一些全局变量，以及添加一些指令、过滤器等

   created 函数会在 beforeCreate 函数之后调用，这个生命周期函数用于处理数据和事件，可以在这里做一些数据处理，如获取服务器数据，定义一些自定义事件，以及定义一些全局方法等

   beforeMount 函数会在 created 函数之后调用，它用于处理 DOM操作，在这个函数里可以检查 DOM 是否正确渲染，也可以定义一些 DOM 操作，比如给某个元素设置属性，添加一些事件等。

   mounted 函数会在beforeMount 函数之后调用，它是 Vue3实例挂载完成后调用的函数，可以在这里定义一些 DOM 操作，比如改变某个元素的样式，添加某个 class 等