vue的生命周期——vue简单说

- 日理万妓 2022-02-27 15:48 299阅读 0赞

### 文章目录 ###

*  beforecreate：el 和 data 并未初始化
 *  created：完成了 data 数据的初始化，el没有
 *  beforeMount：完成了 el 和 data 初始化
 *  mounted：完成挂载
 *  beforeUpdate：数据修改前
 *  updated：数据修改后
 *  beforeDestroy：销毁前，解绑监听
 *  destroyed：销毁后

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tZW5waGlzLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]  
按照惯例：线上代码，用事实说话：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue生命周期</title>
      <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    </head>
    <body>
      <div id="app">
        <h1>{
       {message}}</h1>
      </div>
    </body>
    <script> var vm = new Vue({ el: '#app', data: { message: 'Vue的生命周期' }, beforeCreate: function() { console.group('------beforeCreate创建前状态------'); console.log("%c%s", "color:red" , "el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) }, created: function() { console.group('------created创建完毕状态------'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, 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.message); //已被初始化 }, 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.message); //已被初始化 }, 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.message); }, 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.message); }, 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.message); }, 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.message) } }) </script>
    </html>

运行打印如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tZW5waGlzLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]

# beforecreate：el 和 data 并未初始化 #

在beforecreate时，el 和 data 并未初始化，如图：  
![在这里插入图片描述][20190328083335543.png]

# created：完成了 data 数据的初始化，el没有 #

在created时，初始化事件，完成了 data 数据的初始化，放在data中的属性当值发生改变的同时，视图也会改变。打印如图：  
![在这里插入图片描述][20190328083629956.png]

# beforeMount：完成了 el 和 data 初始化 #

在beforeMount时，完成了 el 和 data 初始化，el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)，  
![在这里插入图片描述][20190328084103470.png]  
**扩展一下**：  
关于编译模板：render函数选项 > template选项 > outer HTML。  
template参数选项的有无对生命周期的影响。  
（1）.如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。  
（2）.如果没有template选项，则将外部HTML作为模板编译。  
（3）.可以看到template中的模板优先级要高于outer HTML的优先级。  
修改代码如下, 在HTML结构中增加了一串html，在vue对象中增加了template选项：

<div id="app">
    	
    	<h1>{
       {message + '这是在outer HTML中的'}}</h1>
    </div>
    <script> new Vue({ el: '#app', template: "<h1>{ {message +'这是在template中的'}}</h1>", //在vue配置项中修改的 data: { message: 'Vue的生命周期' } }) </script>

运行结果：

> Vue的生命周期 这是在template中的

在vue对象中还有一个render函数，它是以createElement作为参数，然后做渲染操作，而且我们可以直接嵌入JSX.

运行结果：

> 这是createElement  
> ![在这里插入图片描述][20190328092941685.png]

# mounted：完成挂载 #

在mounted之前，我们能发现el还是 \{ \{message\}\}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。  
![在这里插入图片描述][20190328093005643.png]

# beforeUpdate：数据修改前 #

# updated：数据修改后 #

vm.message = '666';

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tZW5waGlzLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]

# beforeDestroy：销毁前，解绑监听 #

# destroyed：销毁后 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tZW5waGlzLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20220227/591f612228ff40379d81493294256841.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tZW5waGlzLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20220227/f19e9c34223c41639dffce369763f7f8.png
[20190328083335543.png]: /images/20220227/e07f7017703c44d083d5602e2d629a86.png
[20190328083629956.png]: /images/20220227/4a39d52803b24f5fb4d2a60e5d89580d.png
[20190328084103470.png]: /images/20220227/f29c5463c32a4953ac8d909f533d852e.png
[20190328092941685.png]: /images/20220227/18de7456c35948a2929d4cc1cb0db4a4.png
[20190328093005643.png]: /images/20220227/06c2cf98f1f8414d8a53110df94bce4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tZW5waGlzLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20220227/ef9b8566609f4b4a88d81f5afb499de7.png