vue生命周期钩子总结

学习vue有一段时间了，之前一直是简单的使用，看来很多生命周期钩子的介绍，但是还是不太理解，直到自己开始真正的开发时，才真正的理解。希望接下来的介绍，大家看完可以真正的掌握，没有掌握也不要紧，毕竟编程时需要自己真正的使用，掌握的
备注：大家注意引入vue

介绍

看vue开发文档的时候，大家经常看到的图片如下：

也许刚开不了解，但是当你学会了之后，回头会发现，原来图片真的介绍的很好。

上代码

1、第一个生命周期钩子（beforeCreate）：
下面是我们这次的基本模板，大家可以自己练习，可以更好的理解：

执行上面代码后输出结果：

undefined
this.show() is not a function

2、第二个生命周期钩子create

created(){
                console.log(this.msg)
                this.show()
 }

执行上面代码后输出结果：

ok
执行了show方法

3、beforeMount()

 

        
{{msg}}
  
  .....
  beforeMount(){
    console.log(document.getElementById('h3').innerText) 
  }
  

执行上面代码后输出结果：模板在内存中已经编译好了，但还没更新到新的模板中。

{{msg}}

4、mount()

mount(){
  console.log(document.getElementById('h3').innerText) 
}

执行上面代码后输出结果：页面已经更新了新的模板，此时页面已经被渲染好了，此时如果没有其他操作，此实例就静静的躺在内存中。

ok

5、beforeUpdate和updated
条件：数据发生改变。
beforeUpdate：这是数据被更新，但是模板界面还没有更新。
update：这是数据被更新，但是模板界面已经更新完成。

        
        
{{msg}}
 
 beforeUpdate(){
       console.log('界面上元素的内容：'+document.getElementById('h3').innerText)
      console.log('data中msg中的数据是：'+this.msg)
  }

执行上面代码后输出结果：记得点击修改按钮，这样才会触发beforeUpdate事件。

界面上元素的内容：No
data中msg中的数据是：ok

 updates(){
        console.log('界面上元素的内容：'+document.getElementById('h3').innerText)
        console.log('data中msg中的数据是：'+this.msg)
 }

执行上面代码后输出结果：记得点击修改按钮，这样才会触发beforeUpdate事件。

界面上元素的内容：No
data中msg中的数据是：No

7、beforeDestory和destoryed
beforeDestory执行的时候，实例上所有的data和methods、以及过滤器和指令。。。都处于可用阶段，此时还没有真正的执行销毁过程。
destoryed执行的时候,实例上所有的data和methods、以及过滤器和指令。。。都已经被销毁。