Vue之生命周期（上）

Posted 2021-04-16 KCoding

前言

生命周期是学习Vue的一个非常重要的环节，对于初学者而言，经常会出现数据渲染失败的错误，究其原因还是没有透彻的理解Vue的生命周期，因此接下来让我们看一下其本来的面目。

正文

生命周期图

这是Vue官网提供的生命周期的图示流程。它已经大概的告诉我们每一个阶段做了什么，但是我觉得还是有必要详细的去分析一下，这样有利于我们之后在做项目的时侯，清楚的知道在每一个阶段应该做什么。

beforeCreate

实例初始化---new Vue（）之后，创建实例之前，data、computed、watch、methods和DOM都不能使用。

<script type="text/javascript"> const vm = new Vue({ el: '#root', data: {      test: 'hello world ！' }, beforeCreate() { console.log('beforeCreate钩子事件：'); console.log(this.$data); console.log(this.$el); }  })

得到的结果是：

data: undefinedel  : undefined

注意

如果非要在beforeCreate（）取data也是有办法实现的。异步方式可以通过this.$nextTick()或seTimeout，同步方式可以通过this.$options。当然一般不会这么操作。

created()

在实例创建完成后被立即调用，可以操作data、computed、watch、methods，但DOM还没挂载，不能操作。

 created () { this.getMsg() //1 console.log(this.msg) //1 console.log(this.$el) //undefined }, methods: { getMsg() { console.log(this.msg) }  }

el属性对生命周期的影响

// 有el属性的情况下new Vue({el: '#app',beforeCreate: function() { console.log('调用了beforeCreate')},created: function() { console.log('调用了created')},beforeMount: function() { console.log('调用了beforeMount')},mounted: function() { console.log('调用了mounted')}})
// 输出结果// 调用了beforeCreate// 调用了created// 调用了beforeMount// 调用了mounted

// 在没有el属性的情况下，没有vm.$mount
new Vue({beforeCreate: function() { console.log('调用了beforeCreate')},created: function() { console.log('调用了created')},beforeMount: function() { console.log('调用了beforeMount')},mounted: function() { console.log('调用了mounted')}})
// 输出结果// 调用了beforeCreate// 调用了created

// 在没有el属性的情况下，但是有vm.$mount方法
var vm = new Vue({beforeCreate: function() { console.log('调用了beforeCreate')},created: function() { console.log('调用了created')},beforeMount: function() { console.log('调用了beforeMount')},mounted: function() { console.log('调用了mounted')}})
vm.$mount('#app')
// 输出结果// 调用了beforeCreate// 调用了created// 调用了beforeMount// 调用了mounted

template属性对生命周期的影响

1、在实例内部有template属性的时候，直接用内部的，然后调用render函数去渲染。2、在实例内部没有找到template，就调用外部的html。实例内部的template属性比外部的优先级高。

3、要是前两者都不满足，那么就抛出错误

// 在实例内部new Vue({ el: '#app', template: '<div id="app">hello world</div>'})
//页面上渲染出了hello world
// 在实例外部<div id="app">hello world</div>
new Vue({ el: '#app'})
// 页面上渲染出了hello world

// 两者都存在的时候
<div id="app">hello world2</div>
new Vue({ el: '#app', template: '<div id="app">hello world1</div>'})// 页面上渲染出了hello world1

关于生命周期的中的问题

（1）el属性的判断在template之前的原因是。el是一个选择器，Vue的实例需要用这个el去template中寻找对应的。

（2）vue实例中还有一种render选项，即render渲染函数，作用和template相近之后的文章会做说明。

（3）上述三者的渲染优先级：render函数 > template属性 > 外部html

（4）vue编译过程——把tempalte编译成render函数的过程。