vue生命周期简介

生命周期的钩子 LifeCycle hooks

上面已经能够清晰的看到vue2.0都包含了哪些生命周期的钩子函数~~

那么 执行顺序以及什么时候执行，我们上代码来看~~~

    
          
          
          
      
    
       
{
    {message}}
      

create 和 mounted 相关

执行上面代码，可以看到：

　　beforecreated ：el 和 data 并未初始化

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

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

　　mounted：完成了挂载

也就是说~挂载前的状态是虚拟DOM技术，先把坑站住了~挂载之后才真正的把值渲染进去~

update 相关

我们在浏览器console里执行命令：

　　app.message = "hello~"

我们就出发了update相关的钩子函数~也就是说data里的值被修改会出发update的操作~

destroy 相关

我们在浏览器console里执行命令：

　　app.$destroy();

触发了destroy相关的钩子函数，也就是说组件被销毁~

更改message的值~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了~~