vue-生命周期

生命周期对应四个进程----创建、挂载。更新、销毁

image.png

    
    




     
{{ message }}

image.png

• 当我们 new Vue() 实例时，Vue组件会默认执行init，同时调用函数beforecreate，这时挂载点‘el’与‘data’并未初始化，当我们调用created时，你会发现‘data’初始化了，而‘el’并没有初始化。此时创建结束。

• 接着将会对Vue实例进行两次判断，是否存在‘el’和‘template’，然后调用beforeMount，这时‘el’初始化，但是并没有渲染在我们template(当template不存在时，那么它将☞html)里，只有mounted完成时，才真正完成‘el'的挂载。

• 然后当data里面数据改变时，那么将会执行updetad，讲改变的数据更新在DOM里。如下：

  
  
  image.png

• 当我们在console里执行下命令对 vue实例进行销毁时，销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

image.png

组件的生命周期也就结束了。