Vue 生命周期(钩子函数)
2020-11-27 本文已影响0人
暖A暖
什么是生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程，例如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
下图是官网中实例的生命周期示例图：
- beforeCreate：是第一个生命周期函数，表示实例完全被创建出来之前会执行这个函数。在此函数执行时，data和methods中的属性与方法定义都还没有初始化。
- created：是第一个生命周期函数，在此函数中，data 和 methods 都已经被初始化好了。
- beforeMount：是第三个生命周期函数，表示模板已经在内存中编辑完成了，但是还没有被渲染到页面中。
- mounted：第四个生命周期函数，此时内存中的模板已经挂载到了页面中，用户可以看到渲染好的页面。mounted是实例创建期间的最后一个生命周期函数，当此函数执行完毕，表示实例已经被完全创建好了。
- beforeUpdate：此时界面还没有被更新。
- updated：updated 事件执行的时候，页面和 data 数据已经保持同步。
- beforeDestroy：销毁之前执行，当beforeDestroy函数执行时，表示vue实例已从运行阶段进入销毁阶段，vue实例身上所有的方法与数据都处于可用状态。
- destroyed：当destroy函数执行时，组件中所有的方法与数据已经被完全销毁。
示例：
我们结合代码去看钩子函数的执行，例如下面这段代码：
<!DOCTYPE html>
<html>
<head>
<title>Vue的属性、方法和生命周期_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js" type="text/javascript" ></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input type="button" @click="change" value="更新数据" />
<input type="button" @click="destroy" value="销毁" />
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "侠课岛欢迎你"
},
methods:{
change() {
this.message = '好好学习，天天向上';
},
destroy() {
app.$destroy();
}
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态：');
console.log("%c%s", "color:gary" , "el : " + this.$el);
console.log("%c%s", "color:gary","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态：');
console.log("%c%s", "color:green","el : " + this.$el);
console.log("%c%s", "color:green","message: " + this.message);
},
beforeMount: function () {
console.group('beforeMount 挂载前状态：');
console.log("%c%s", "color:gary","el : " + (this.$el));
console.log("%c%s", "color:gary","message: " + this.message);
},
mounted: function () {
console.group('mounted 挂载结束状态：');
console.log("%c%s", "color:orange","el : " + this.$el);
console.log("%c%s", "color:orange","message: " + this.message);
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态：');
console.log("%c%s", "color:gary","el : " + this.$el);
console.log("%c%s", "color:gary","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态：');
console.log("%c%s", "color:Violet","el : " + this.$el);
console.log("%c%s", "color:Violet","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态：');
console.log("%c%s", "color:gary","el : " + this.$el);
console.log("%c%s", "color:gary","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态：');
console.log("%c%s", "color:blue","el : " + this.$el);
console.log("%c%s", "color:blue","message: " + this.message)
}
})
</script>
</body>
</html>
在浏览器中打开：
点击更新数据按钮：
点击销毁按钮：
钩子函数
一个指令定义对象可以提供如下几个钩子函数，这些钩子函数都是可选：
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
unbind：只调用一次，指令与元素解绑时调用。 -
inserted：被绑定元素插入父节点时调用。 -
update：所在组件的 VNode 更新时调用，可能发生在其子 VNode 更新之前。 -
componentUpdated：指令所在组件的 VNode 及其子 VNode全部更新后调用。
钩子函数参数
指令钩子函数会被传入以下参数：
-
el：指令所绑定的元素，可以用来直接操作 DOM。 -
binding：一个对象，包含属性有name、value、oldValue、arg、expression、modifiers等。 -
vnode：Vue 编译生成的虚拟节点。 -
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
钩子函数使用
下面是一个自定义钩子使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的学习_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<div id="app">
<my-comp v-if="message" :msg="message"></my-comp>
<button @click="change">更改</button>
</div>
</body>
<script>
Vue.directive('hello', {
bind: function (el) {
console.log('bind')
},
inserted: function (el) {
console.log('inserted')
},
update: function (el) {
console.log('update')
},
componentUpdated: function (el) {
console.log('componentUpdated')
},
unbind: function (el) {
console.log('unbind')
}
})
var myComp = {
template: '<h1 v-hello>{{msg}}</h1>',
props: {
msg: String
}
}
new Vue({
el: '#app',
data(){
return{
message:"侠课岛"
}
},
methods:{
change: function () {
this.message = '小飞侠'
}
},
components: {
myComp: myComp
},
});
</script>
</html>
演示效果：
