先附上神兽镇楼。
神兽.png
神兽有点喜感，不错的开头。
接下来附上官方盗的图，读书人的事不能说偷，要说盗。
Vue官方截图.png
八个钩子
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
什么是生命周期：
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
主要的生命周期函数分类
- 创建期间的生命周期函数：
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性。在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板，就是还没有渲染到对应的页面模块中，只是先创建好了。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中。在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。el 被新创建的 vm.$$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
- 运行期间的生命周期函数：
- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
- 销毁期间的生命周期函数：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
先附上等会要用到的代码
<template>
<div id="app">
hello world！
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
},
created: function () {
console.group('created 创建完毕状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + (this.$el))
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
},
mounted: function () {
console.group('mounted 挂载结束状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
},
updated: function () {
console.group('updated 更新完成状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
}
}
</script>
create 和 mounted 相关
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
update 相关
data里的值被修改后，将会触发update的操作。
执行了destroy操作，后续就不再受vue控制了。
开始实战
首先创建一个vue项目。
安装.png
然后等待安装。。。。
不知道什么原因装的很慢，大概40分钟，一直在等待，等待期间做了很多事，
看来会视频，打了会瞌睡，终于装好了。
安装完成.png
好滴，按照提示，开始新的旅途。
编译成功.png
编译速度还是很快的。
很好，成功第一步。
首页地址.png
找到我的webstorm，进入项目。
笔记本操作，要卡会，我已经给我的笔记本加了4g的内存。它还是不给力，看来要考虑重装系统了，==。
进入项目将之前的代码键入。
稍等，先将首页改成hello world
helloWorld.png
代码执行后，打开控制台查看信息。
然后刷新一下。
控制台.png
仔细看一下 beforeCreate:
beforeCreate.png
这里el，data，message都还是undefind，三个都还没有被初始化赋值。
Created后：
Created.png
el，还是没有变化，也就是还没有渲染到页面中
但是data已经被初始化了，
message也已经初始化了。
增加一个compute试试？
computed: {
hello () {
return 'hello,i am a watch!'
}
}
computed.png
也是一样，created后，compute就被调用了，同理，留给大家自己证明。感觉像数学上的惯例，先证明一个，剩下的留给读者自己证明。
然后看挂载前。
beforeMount.png
看起来没有啥变化，和created比起来。这里是完成了渲染的准备工作，但是还没有渲染/
然后是挂载完成。
Mount.png
el，就是我们的div标签，内容了，被挂载到页面中了。
然后增加两个按钮，来查看更新和销毁动作。这里用了el，自己装。
<el-button @click="dataVar += 1" type="primary" >更新 {{dataVar}}</el-button>
<el-button @click="handleDestroy" type="primary">销毁</el-button>
methods: {
handleDestroy () {
this.$destroy()
}
}
然后页面就变成了这样。
增加了按钮的页面.png
updated和beforeupdate
updated和beforeupdate.png
他们的dataVar都是一样的，差异就在于，beforeupdate时页面的数据还没刷新，updated后，页面的数据就刷新了，这里待验证。
点击完页面就+1了。
页面显示+1.png
然后点击销毁按钮。
销毁.png
显示的还是一样，但是销毁后Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
这里，再次点击更新按钮就失效了，不能增加1了。
没有变化的按钮.png
最后附上最终代码
<template>
<div id="app">
hello world！
<el-button @click="dataVar += 1" type="primary" >更新 {{dataVar}}</el-button>
<el-button @click="handleDestroy" type="primary">销毁</el-button>
<button @click = "hellos = !hellos"> 切换 </button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
dataVar: 1,
hellos: true
}
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
console.log('%c%s', 'color:red', 'computed: ' + this.hello)
},
created: function () {
console.group('created 创建完毕状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
console.log('%c%s', 'color:red', 'computed: ' + this.hello)
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + (this.$el))
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
console.log('%c%s', 'color:red', 'computed: ' + this.hello)
},
mounted: function () {
console.group('mounted 挂载结束状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
console.log('%c%s', 'color:red', 'computed: ' + this.hello)
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
console.log('%c%s', 'color:red', 'computed: ' + this.hello)
console.log('%c%s', 'color:red', 'dataVar: ' + this.dataVar)
},
updated: function () {
console.group('updated 更新完成状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
console.log('%c%s', 'color:red', 'computed: ' + this.hello)
console.log('%c%s', 'color:red', 'dataVar: ' + this.dataVar)
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
console.log('%c%s', 'color:red', 'computed: ' + this.hello)
console.log('%c%s', 'color:red', 'dataVar: ' + this.dataVar)
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.msg)
console.log('%c%s', 'color:red', 'computed: ' + this.hello)
console.log('%c%s', 'color:red', 'dataVar: ' + this.dataVar)
},
computed: {
hello () {
return 'hello,i am a watch!'
}
},
methods: {
handleDestroy () {
this.$destroy()
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
结束分享！
