Vue2.0生命周期

比眉伴天荒 2022-06-03 09:39 192阅读 0赞

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。

其实在Vue的官网有一张图已经很好的诠释了生命周期，我在这里就不再多讲了，直接贴图，然后上程序代码。

![vue-lifecycle.png][]

我们直接来看一段代码：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
     <div>
       4 
     </div> 
     <div>
       5 
     </div> 
     <div>
       6 
     </div> 
     <div>
       7 
     </div> 
     <div>
       8 
     </div> 
     <div>
       9 
     </div> 
     <div>
       10 
     </div> 
     <div>
       11 
     </div> 
     <div>
       12 
     </div> 
     <div>
       13 
     </div> 
     <div>
       14 
     </div> 
     <div>
       15 
     </div> 
     <div>
       16 
     </div> 
     <div>
       17 
     </div> 
     <div>
       18 
     </div> 
     <div>
       19 
     </div> 
     <div>
       20 
     </div> 
     <div>
       21 
     </div> 
     <div>
       22 
     </div> 
     <div>
       23 
     </div> 
     <div>
       24 
     </div> 
     <div>
       25 
     </div> 
     <div>
       26 
     </div> 
     <div>
       27 
     </div> 
     <div>
       28 
     </div> 
     <div>
       29 
     </div> 
     <div>
       30 
     </div> 
     <div>
       31 
     </div> 
     <div>
       32 
     </div> 
     <div>
       33 
     </div> 
     <div>
       34 
     </div> 
     <div>
       35 
     </div> 
     <div>
       36 
     </div> 
     <div>
       37 
     </div> 
     <div>
       38 
     </div> 
     <div>
       39 
     </div> 
     <div>
       40 
     </div> 
     <div>
       41 
     </div> 
     <div>
       42 
     </div> 
     <div>
       43 
     </div> 
     <div>
       44 
     </div> 
     <div>
       45 
     </div> 
     <div>
       46 
     </div> 
     <div>
       47 
     </div> 
     <div>
       48 
     </div> 
     <div>
       49 
     </div> 
     <div>
       50 
     </div> 
     <div>
       51 
     </div> 
     <div>
       52 
     </div> 
     <div>
       53 
     </div> 
     <div>
       54 
     </div> 
     <div>
       55 
     </div> 
     <div>
       56 
     </div> 
     <div>
       57 
     </div> 
     <div>
       58 
     </div> 
     <div>
       59 
     </div> 
     <div>
       60 
     </div> 
     <div>
       61 
     </div> 
     <div>
       62 
     </div> 
    </div> <p></p></td> 
   <td> 
    <div> 
     <div> 
      <span>&lt;</span> 
      <span>!</span> 
      <span>DOCTYPE </span> 
      <span>html</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&lt;</span> 
      <span>html </span> 
      <span>lang</span> 
      <span>=</span> 
      <span>“en”</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&lt;</span> 
      <span>head</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>meta </span> 
      <span>charset</span> 
      <span>=</span> 
      <span>“UTF-8”</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;script </span> 
      <span>type</span> 
      <span>=</span> 
      <span>“text/javascript”</span> 
      <span> </span> 
      <span>src</span> 
      <span>=</span> 
      <span>“../assets/js/vue.js”</span> 
      <span>&gt;</span> 
      <span>&lt;/script&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>title</span> 
      <span>&gt;</span>构造器的声明周期 
      <span>&lt;</span> 
      <span>/</span> 
      <span>title</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>head</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&lt;</span> 
      <span>body</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>h1</span> 
      <span>&gt;</span>构造器的声明周期 
      <span>&lt;</span> 
      <span>/</span> 
      <span>h1</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>hr</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>id</span> 
      <span>=</span> 
      <span>“app”</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>{ </span> 
      <span>{ </span> 
      <span>message</span> 
      <span>}</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>p</span> 
      <span>&gt;</span> 
      <span>&lt;</span> 
      <span>button</span> 
      <span> </span> 
      <span>@</span> 
      <span>click</span> 
      <span>=</span> 
      <span>“jia”</span> 
      <span>&gt;</span>加分 
      <span>&lt;</span> 
      <span>/</span> 
      <span>button</span> 
      <span>&gt;</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>p</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>button </span> 
      <span>onclick</span> 
      <span>=</span> 
      <span>“app.$destroy()”</span> 
      <span>&gt;</span>销毁 
      <span>&lt;</span> 
      <span>/</span> 
      <span>button</span> 
      <span>&gt;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;script </span> 
      <span>type</span> 
      <span>=</span> 
      <span>“text/javascript”</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>app</span> 
      <span>=</span> 
      <span>new</span> 
      <span> </span> 
      <span>Vue</span> 
      <span>(</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>el</span> 
      <span>:</span> 
      <span>‘#app’</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>data</span> 
      <span>:</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>message</span> 
      <span>:</span> 
      <span>1</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>methods</span> 
      <span>:</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>jia</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>this</span> 
      <span>.</span> 
      <span>message</span> 
      <span> </span> 
      <span>++</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>beforeCreate</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>‘1-beforeCreate 初始化之后’</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>created</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>‘2-created 创建完成’</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>beforeMount</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>‘3-beforeMount 挂载之前’</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>mounted</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>‘4-mounted 被创建’</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>beforeUpdate</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>‘5-beforeUpdate 数据更新前’</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>updated</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>‘6-updated 被更新后’</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>activated</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>‘7-activated’</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>deactivated</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>‘8-deactivated’</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>beforeDestroy</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>‘9-beforeDestroy 销毁之前’</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>destroyed</span> 
      <span>:</span> 
      <span>function</span> 
      <span>(</span> 
      <span>)</span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>console</span> 
      <span>.</span> 
      <span>log</span> 
      <span>(</span> 
      <span>‘10-destroyed 销毁之后’</span> 
      <span>)</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>)</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;/script&gt;</span> 
     </div> 
     <div> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>body</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>html</span> 
      <span>&gt;</span> 
     </div> 
    </div> <p></p></td> 
  </tr> 
 </tbody> 
</table>

[vue-lifecycle.png]: http://7xjyw1.com1.z0.glb.clouddn.com/vue-lifecycle.png