Vue的生命周期函数

生命周期函数

研究vue的生命周期，实际上说的是vue实例的生命周期，主要是指生命周期中的一些函数，

这个函数，会在合适的时机，自动调用，不需要我们去调用，这个函数，叫生命周期函数，

也叫钩子函数，如下：

• beforeCreate

• created

• beforeMount

• mounted

• beforeUpdate

• updated

• beforeDestroy

• destroyed

• beforeCreate: Create表示创建，创建vm实例

​ 基本上没有什么用，在vm实例创建之前，此函数中，是没有办法得到DOM元素的，因为DOM元素还没挂载到页面上

• created

​ vm实例已创建完毕，vm可以工作了，在引钩子中，就可以获取data中的数据，调用methods中的方法了。但是还不能获取DOM元素，因为DOM元素，还没有挂载到页面上。

​ 在此勾子函数中，就可以发送ajax请求，在vue中发送ajax请求，一般会使用axios。 但是vue中基本上不会使用jq，或jq中的ajax

• beforeMount

​ 表示DOM元素挂载到页面之前调用，也没有什么用，因为DOM也获取不了。

​ 基本上也没有人在这个钩子中发送ajax请求。

• mounted

​ DOM元素已经挂载OK了，我们已经看到网页了。此钩子中：

​ 1）获取data中的数据

​ 2）调用methods中的方法

​ 3）也可以发送ajax请求 有些人就喜欢在mounted这个钩子中发送ajax请求

​ 4）获取DOM元素

• beforeUpdate

​ 当状态改变时，会自动刷新的模板，此时就会调用beforeUPdate。在这个钩子函数中，

​ 获取的数据是最新的数据，但是页面上的数据还是老数据。

• updated

​ 页面已经渲染完毕，页面上的数据就变成了最新的数据。

​ 问：你能不能在updated中改变数据？

​ 答：不能 如果修改了，可能会造成死循环

• beforeDestroy

​ 在vm实例死之前，会调用beforeDestroy，在这个钩子，可以做一些收尾工作（后面说）

• destroyed

​ vm已死，此钩子没什么用

现在我们需要掌握的：

​ 1）created 可以发送ajax请求 获取数据 调用方法

​ 2）mounted 可以发送ajax请求 可以获取DOM元素 获取数据 调用方法