文章目录
在1.0版本中，Vue的生命周期一共有九个步骤，分别是：init、created、beforeCompile、compiled、activate、ready、attached、detached、beforeDestroy、destroyed。
其中Vue在初始化时依次触发init、created、beforeCompile、compiled、activate、ready、attached。
在detached时，Vue完成的操作是这样的：在vm.$el从DOM中删除时调用。该操作必须是由指令或实例方法删除。
而beforeDestroy、destroyed是在vm实例销毁时依次触发执行。
init
- 类型：
Function - 说明：
在初始化实例之后，在数据观察和事件/观察者设置之前同步调用。
created
- 类型：
Function - 说明：
在创建实例之后同步调用。在这个阶段，实例已经完成了对选项的处理，这意味着已经设置了以下选项:数据观察、计算属性、方法、监视/事件回调。但是，DOM编译还没有启动，$el属性还没有可用。
beforeCompile
- 类型：
Function - 说明：
在编译开始之前调用。
compiled
- 类型：
Function - 说明：
编译完成后调用。在此阶段，所有指令都已链接，因此数据更改将触发DOM更新。然而，$el还不能保证已经插入到文档中。
activate
- 类型：
Function - 参数：
{Function} done
- 作用：
在编译完成后，就在ready钩子之前调用，但只在动态组件交换期间或在静态组件的初始呈现中调用。与其他生命周期钩子不同，它接受一个done的回调，该调用必须在生命周期的其余部分完成。在组件交换之前执行一些异步操作是最有用的，比如从API中获取数据。
ready
- 类型：
Function - 作用：
编译后调用，$el第一次插入到文档中，即在第一个附加钩子之后。注意，此插入必须通过Vue(使用vm.$appendTo()等方法或作为指令更新的结果)来触发ready钩子。
attached
- 类型：
Function - 作用：
通过指令或一个VM实例方法，例如$appendTo()将vm.$el连接到DOM。直接操作vm.$el不会触发这个钩子。
detached
- 类型：
Function - 作用：
通过指令或一个VM实例从DOM中移除vm.$el。直接操作vm.$el不会触发这个钩子。
beforeDestroy
- 类型：
Function - 作用：
在Vue实例被销毁之前调用。在此阶段，该实例仍然具有完整的功能。
destroyed
- 类型：
Function - 作用：
在Vue实例被销毁后调用。当调用这个钩子时，Vue实例的所有绑定和指令都被解除绑定，所有子Vue实例也被销毁。
注意，如果存在离开转换，则在转换完成后调用已destroyed的钩子。
示例源码
html源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item.name}}</li>
</ul>
</div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script src="../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
list:[]
}
,created(){
this.getData();
}
,methods:{
getData(){
var url = '../json/get.json';
this.$http.get(url).then(function(res){
var body = res.body;
if(body.status){
alert('请求出错！');
}
this.list = body.message;
});
}
}
});
</script>
</body>
</html>
get.json
{
"status":0
,"message":[
{
"id":1
,"name":"张三"
}
,{
"id":2
,"name":"李四"
}
]
}
运行结果
分析
由于这篇文章的源码是在上一篇文章的源码基础上进行修改的，所以说对于源码相同的部分的说明，我们可以通过查看上一篇文章得知。
上一篇文章的地址如下：
这里我则重点说明一下其与上一篇文章代码中不同的部分。
在上一篇文章中，我们是通过点击页面的按钮来触发getData()函数，这里与上一篇文章的不同之处在于其通过Vue的生命周期对其进行相应的处理，由于这篇文章上面我们得知，在Vue实例化之后，其就会自动执行一系列方法，比如说我们这里所使用的created阶段的生命周期。当Vue示例话之后，其马上就会执行created函数，在该函数中，我们通过调用methods作用域中的getData()来帮助我们自动完成页面数据的渲染操作。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
