Vue实例的生命周期以及钩子函数

Vue实例的生命周期

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({ // 选项 })

从创建到销毁的过程，这些过程会伴随一些函数的自调用，我们称这些函数为钩子函数。

常用的钩子函数：

beforeCreate在实例初始化后，数据观测和事件配置之前被调用create在实例完成创建后，但页面还未被渲染beforMount在挂载开始之前被调用，此时页面还看不到真实数据，只是一个模板页面mountedel被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前，页面上数据还是之前的updated数据更改导致虚拟DOM重新渲染和打补丁，在这之后会调用钩子beforeDestroy实例销毁之前调用destroyed实例销毁后调用

可以看到代码的运行结果如下：

<div id="app">{{msg}}</div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <script> var vm = new Vue({ el:'#app', data:{ msg:'Vue实例生命周期' }, methods:{ period:function(){ console.log('我是methods里的方法'); } }, beforeCreate:function(){ console.log(this.$el);//undefined console.log(this.$data);//undefined console.log(this.$methods);//undefined }, created:function(){ console.log(this.$el);//undefined console.log(this.$data);//已经初始化 console.log(this.methods);//undefined }, beforeMount:function(){ console.log(this.$el);//已经初始化，但没有真实数据 console.log(this.$data);//已经初始化 console.log(this.methods);//undefined }, mounted:function(){//数据渲染到页面上 console.log(this.$el);//已经初始化，有真实数据 console.log(this.$data);//已经初始化 console.log(this.methods);//undefined }, beforeDestroy:function(){//实例销毁之前调用 console.log(this.$el); console.log(this.$data); console.log(this.methods); }, destroyed:function(){//实例销毁之后调用 console.log(this.$el); console.log(this.$data); console.log(this.methods); } }) </script>

实例的生命周期图示（来源官网）