下图展示了实例的生命周期
这里的红边圆角矩形内的都是对应的Vue实例的钩子函数
生命周期是很重要的知识，Vue本质上是一个实例，既然的一个对象，就会有创建的过程，也有挂载，銷毀的过程，这些过程有对应的钩子函数。
一、在beforeCreate和created钩子函数间的生命周期
image
在beforeCreate和created之间，进行数据观测(data observer) ，也就是在这个时候开始监控data中的数据变化了，同时初始化事件
二、created钩子函数和beforeMount间的生命周期
image
对于created钩子函数和beforeMount间可能会让人感到有些迷惑，下面我就来解释一下：
image.png
１、el选项的有无对生命周期过程的影响
首先系统会判断对象中有没有el选项
有el选项，则继续编译过程
没有el选项，则停止编译，也意味着暂时停止了生命周期，直到vm.$mount(el)
下面我展示一下：
new Vue({
el: '#app',
beforeCreate: function () {
console.log('调用了beforeCreat钩子函数')
},
created: function () {
console.log('调用了created钩子函数')
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
}
})
demo如下：
image
可以看到，在el选项填写且正确的时候，生命周期将正常进行
而当我们把el去掉：
new Vue({
beforeCreate: function () {
console.log('调用了beforeCreat钩子函数')
},
created: function () {
console.log('调用了created钩子函数')
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
}
})
demo：
image
可以看到，生命周期的钩子函数执行到created就结束了
而当我们不加el选项，但是手动执行vm.$mount(el)方法的话，也能够使暂停的生命周期进行下去，例如：
var vm = new Vue({
beforeCreate: function () {
console.log('调用了beforeCreat钩子函数')
},
created: function () {
console.log('调用了created钩子函数')
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
}
})
vm.$mount('#app')
demo如下，可以看到，这个时候虽然对象中没有el参数，但通过$mount(el)动态添加的方式，也能够使生命周期顺利进行
image.png
２、template参数选项的有无对生命周期的影响
image.png
1.如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数
2.如果没有template参数选项，则将外部的HTML作为模板编译（template），也就是说，template参数选项的优先级要比外部的HTML高
3.如果1,2条件都不具备，则报错
我们可以把模板写在template参数选项中：
new Vue({
el: '#app',
template: '<div id="app"><p>模板在templated参数中找到了哟~</p></div>'
})
三、beforeUpdate钩子函数和updated钩子函数间的生命周期
image
在Vue中，数据更改会导致虚拟 DOM 重新渲染，并先后调用beforeUpdate钩子函数和updated钩子函数
但要注意一点：重渲染（调用这两个钩子函数）的前提是被更改的数据已经被写入模板中！！（这点很重要）
例如：
var vm = new Vue({
el: '#app',
data: {
number: 1
},
template: '<div id="app"><p></p></div>',
beforeUpdate: function () {
console.log('调用了beforeUpdate钩子函数')
},
updated: function () {
console.log('调用了updated钩子函数')
}
})
vm.number = 2
image
控制台上并没有如我们预料那样输出调用两个钩子函数的文本
而当我们改成
var vm = new Vue({
el: '#app',
data: {
number: 1
},
// 在模板中使用number这个数据
template: '<div id="app"><p> {{ number }} </p></div>',
beforeUpdate: function () {
console.log('调用了beforeUpdate钩子函数')
},
updated: function () {
console.log('调用了updated钩子函数')
}
})
vm.number = 2
image
这个时候，调用两个钩子函数的文本就被输出来了
总之，只有Vue实例中的数据被“写入”到我们的模板中，它的改变才可以被Vue追踪，重渲染从而调用 beforeUpdate钩子函数和updated钩子函数
四、beforeDestroy和destroyed钩子函数间的生命周期
image
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
组件的生命周期常与API请求一起使用，比如一个组件，需要去发起API请求，获得数据，这时可以在组件的创建created的函数钩子里发起请求。
OK, 今天只需要对Vue的生命周期有一定的认识即可，如果上面都看懂了，那是最好的，半懂的也没关系。可以复制下面的代码到本地的html文件中，自己下载vue.js，引入，用浏览器打开该HTML文件。再看控制台的输出。Vue生命周期也是很简单的嘛。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}<br>{{reversedMessage}}{{number}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
number: 1,
message: 'Hello1'
},
beforeUpdate: function () {
console.log('调用了beforeUpdate钩子函数')
},
updated: function () {
console.log('调用了updated钩子函数')
},
computed: {
reversedMessage: function () {
return this.message.split("").reverse().join("")
}
}
})
vm.number = 2
</script>
</body>
</html>
网友评论