vue钩子函数ajax请求,Vuejs的生命周期钩子函数

组件的整个生命期间，自动调用的特定函数

生命周期的8个钩子函数

什么时候用

beforeCreate

访问不到数据，也访问不到节点

基本不用

前四个只在实例创建时调用一次

created

能访问数据，不能访问节点

一上来就访问数据的时候用

beforeMount

能访问数据，不能访问节点

在挂载开始之前被调用

后六个钩子在服务器端渲染期间不被调用

mounted

能访问数据和节点

访问数据的时候可以用，访问节点的时候必须用

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁(更新)之前

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

能监控组件中所有数据的变化

但是会有造成死循环的可能，改数据要慎重

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

组件销毁之前，清理资源时用，防止内存泄漏

destroyed

Vue 实例销毁后调用

调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

1. beforeCreate 执行的最早 基本不用

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

访问不到数据，也访问不到节点。在created之前调用。

2. created ！！！ 一上来就访问数据的时候用

拿得到数据，拿不到节点

在实例创建完成后被立即调用，能够访问数据(包括读和写)，也能够 发 ajax请求(axios发送请求的工具 )，拿不到元素

在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性(元素)目前不可见。

bootcdn 网站 -- 很多工具(axios)

3.beforeMounte

在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted！！！！！！！ 访问数据的时候可以用，访问节点的时候必须用

真实的dom已经存在了，不但可以访问数据也可以访问节点

5. beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6.update

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：

this.$nextTick(function () {

// Code that will run only after the

// entire view has been re-rendered

})

}

7. beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

8. destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

该钩子在服务器端渲染期间不被调用。

销毁组件：this.$destroy

例子：钩子函数和axios请求数据

引入axios文件

• {{item.body}}

//在js里面：

new Vue({

el:'.box',

data:{

list:[]

},

created(){ axios.get("http://jsonplaceholder.typicode.com/posts").then(res => {

this.list = res.data

})

}

})