vue3笔记总结（一）

生命周期

Vue 3 中的生命周期钩子函数相较于 Vue 2 有所改变。以下是 Vue 3 的生命周期钩子函数：

1. 创建前后

• beforeCreate：实例初始化之后，数据观测和事件配置之前调用。

• created：在实例创建完成后调用，可以访问到已经创建好的实例。

2. 挂载前后

• beforeMount：在挂载开始之前被调用，此时模板编译完成，但尚未将渲染结果挂载到 DOM 中。

• mounted：在挂载完成后被调用，此时实例已经被挂载到一个真实的 DOM 中。

3. 更新前后

• beforeUpdate：在更新开始之前被调用，此时数据已经被修改，但 DOM 尚未重新渲染。

• updated：在更新完成之后被调用，此时数据已经被修改，并且 DOM 已经重新渲染。

4. 销毁前后

• beforeUnmount：在组件销毁之前调用，可以在该钩子函数中执行一些清理操作，例如取消订阅、关闭连接、清除计时器、移除事件监听等。

• unmounted：在组件销毁完成之后调用，可以在该钩子函数中执行一些最终的清理操作，例如清理内存、解绑事件监听器等。

注意：当在 Vue 3 中使用 setup 函数时，beforeCreate 和 created 生命周期钩子函数将不再被触发。这是因为 setup 函数已经取代了 beforeCreate 和 created 钩子函数的功能，实现开启定时器、ajax、事件监听、获取本地数据。

常用的组合式API

1、setup:

vue3中的一个新的配置项，值为一个函数，组件中所要用到的数据、方法等，均要配置在setup中；

<script setup>
... 组件中所用的数据
... 组件中需要用到的方法
</script>

2、ref:

定义一个值类型的响应式数据，使用前需用 import 引入

<script setup>
import {ref} from 'vue'

const name = ref("小明");
const age = ref(18);

</script>

3、reactive：

定义引用类型的响应式数据，使用前需 import 引入

<script setup>
import {reactive} from 'vue'

const list = reactive(["vue","uni","react"])
</script>

4、watch:

监听数据的变化执行回调函数，使用前需 import 引入

<template>
<button size="mini" type="warn" @click="num++">{{num}}</button>
</template>
<script setup>
import {watch} from 'vue'
watch(num,(nval,oval)=>{
		console.log("num发生变化",nval,oval);
	})
</script>

使用stop可以停止监听

const stop = watch(num,()=>{},{deep:true})

5、computed:

根据现有数据计算出新的数据，使用前需 import 引入

<template>
<view>{{dnum}}</view>
<button size="mini" @click="mynum = num+2">{{mynum}}</button>
</template>
<script setup>
import {computed} from 'vue'
const dnum = computed(()=>num.value*2)
const mynum = computed({
		get:()=>num.value*10,
		set:v=>num.value=v
	})
</script>

6、 watchEffect:

引用的响应式数据可以监听执行器的回调函数，使用前需 import 引入

watchEffect(()=>{
	consloe.log(num)
})