生命周期函数就是 Vue 实例在某一个时间点自动执行的函数
先上图，一步一步讲解
建议边看生命周期图 边看最下面的步骤一步一步的走，有不理解的地方看看总结。并且在事件中多实验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">hello Vue</div>
<script>
// 生命周期函数就是 Vue 实例在某一个时间点自动执行的函数
// 总共有11个生命周期钩子 图上有8个生命周期钩子
/**
* 1：首先它会去 初始化事件 和 生命周期相关的一些内容 最基础的初始化完成
* 在图中就是 Init Events & Lifecycle
* 2：Vue 会自动的执行 beforeCreate 生命周期函数
* 3：Vue 会继续的处理一些外部的注入包括双向的一些绑定相关的内容，
* 当这部分的初始化也完成了之后，实例的一些初始化也都完成了。
* 4:在这个节点上会自动的执行 created生命周期函数, Vue的初始化基本上已经结束
* 5:然后会去判断我这个实例上是否有 el属性，如果有就会走Yes这条线。
* 6:紧接着又会询问 我这个实例上是否有 template 这个属性
* 6-1:如果没有tempate 就会去走右侧的分支，就是把el 本身及子元素当做模板来进行渲染
* 6-2:如果有 template 属性就会去走左边的分支，把templaet 属性值进行渲染。el就被否定了
* 7:我们有了模板和数据之后并没有直接去进行渲染，在渲染之前呢 会自动的执行 beforeMount 生命周期函数，也就是模板和数据相结合 ，即将挂载到页面上去之前的时候回执行
* 8:当挂载渲染到页面之上后 执行 mounted 生命周期函数
*
* beforeDestroy 生命周期函数 即将被销毁执行
* destroyed 生命周期函数 被销毁之后执行
* 会在 这个Vue 实例 调用 $destroy() 方法会被执行这两个方法
*
* beforeUpdate 生命周期函数 在数据发生改变还没被渲染之前执行
* updated 生命周期函数 在重新渲染之后 会被执行
* 会在 Vue 的数据发生改变执行
*/
var vm = new Vue({
el:'#app',
data:{
message:"this is Vue life cycle"
},
// template:"<div>如果有template 属性则执行template 进行渲染DOM</div>",
template:"<div>{{message}}</div>",
// 在创建Vue 实例之前执行的函数
beforeCreate:function () {
console.log('beforeCreate');
},
// 创建Vue 实例成功之后执行的函数
created:function () {
console.log('created');
},
// 如果有template 模板属性 则将模板编译渲染DOM
// 如果没有template 编译el 的DOM 包含元素本身及内部的
// 在挂载之前执行 也就是在真正渲染前执行
beforeMount:function () {
console.log(this.$el);
console.log('beforeMount');
},
// 渲染完成执行的方法
mounted:function () {
console.log(this.$el);
console.log('mounted');
},
// 当数据发生变化时
beforeUpdate:function () {
console.log('beforeUpdate');
},
// 虚拟DOM 重新渲染 修改
updated:function () {
console.log('updated');
},
// 当执行这个Vue实例的 $destroy() 方法时执行
beforeDestroy:function () {
console.log(this.message);
},
// 当删除了Vue实例时执行的方法
destroyed:function () {
console.log(this.message);
}
})
</script>
</body>
</html>补充这个当时遇到没想明白，现在理解了的问题 分享：
// 我们的数据对象
var data = { a: 1};
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
});1:打开页面，到控制台 Console 页面
data.a
vm.a
// 查看双方的值
2:现在改变 data.a 的值 该为 520 查看vm.a 的值是否改变 。 是否是双向绑定
data.a = 520
vm.a
结果发现确实是如我们所料 ，数据是双向绑定的 是引用同一个内存地址
官方文档是这么说的：
当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的
但是虽然好像似懂非懂，但是不知道怎么去测试。
3:在控制台声明的新变量 dd = 888 ,并且去绑定到 vm的 data数据中
dd = 888
vm.b = dd
vm.b
4:这时候改变 vm.b = 999，去查看下 dd 结果发现 dd的值还是 888 那么对 b 的改动将不会触发任何视图的更新
5:这时候在去测试下 vm.a = 555 在去看 data.a 发现还是双向绑定的
然后，在去看文档的这句话:
如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：
扫描二维码关注公众号，回复：
4064213 查看本文章
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}