今天继续学习vue3-生命周期&ref获取元素&nextTick&自定义hook函数。

生命周期

简单介绍

vue2中的生命周期钩子函数仍然可以使用，但是建议使用vue3的钩子函数

vue2与vue3生命周期对比

vue2写法	vue3写法
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

注意：beforeDestroy和destroyed已经被废弃，如果想继续使用vue2的写法，对应的api是beforeUnmount(beforeDestroy)和unmounted(destroyed);同一阶段的周期函数vue3的比vue2的先执行。

使用方法

ref获取元素&nextTick用法

简单介绍

1. 我们知道vue2中是用this.$refs.xxx来获取元素或组件的，但是vue3中没有this的概念，这个时候我们可以使用之前学过的ref创建响应式数据的api来获取元素。

使用ref创建响应式数据，假设叫X
模板中绑定ref属性，值为上面的X
    1.注意不能使用v-bind动态绑定
    2.这时X就是一个dom元素或组件了

1. vue2中我们一般使用this.$nextTick，vue3中没有this，可以在引入后直接用nextTick。

使用方法

自定义hook函数

简单介绍

用过react的同学对hook函数这个名词应该不陌生，hook函数翻译成中文就是钩子函数（注意并不只是生命周期钩子函数）。

其实我们前面学过的所有api，比如ref、reactive、computed、watch、onBeforeMount等等都是hook函数，只不过他们是vue内部hook函数，现在我们要学怎么自定义一个hook函数。

创建一个函数，函数的名称必须use开头
函数必须return一些数据

使用方法

我新建了一个文件hooks，把自定义hooks函数的都放在这里，使用的时候需要引入。也可以在页面中直接写直接用。

先更新一部分，后面会继续更新，敬请期待。