11，vue学习笔记 -- 生命周期（钩子）函数

11，vue学习笔记 – 生命周期（钩子）函数

官方学习链接：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
定义：组件挂载 更新 销毁时触发的函数方法。
mounted(){｝

<templete>
<div id="life">
生命周期函数演示 -- {
    {
    msg}}
<button @click="setMsg()">执行方法改变msg</button>
</div>
</templete>
<script>
export default{
    data(){
    return{
    msg:'我是一个生命周期函数'}}，mounted(){
    setMsg(){
    this.msg ="我是改变后的数据"}console.log('我是一个生命周期函数')；}，beforeCreate(){
    console.log('实例刚刚被创建1');},created(){
    console.log('实例已经创建完成2');},beforeMount(){
    console.log('模板编译之前3');},mounted(){
         /*请求数据，操作dom , 放在这个里面 mounted*/console.log('模板编译完成4');},beforeUpdate(){
    console.log('数据更新之前');},updated(){
    console.log('数据更新完毕');},beforeDestroy(){
       /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/console.log('实例销毁之前');},destroyed(){
    console.log('实例销毁完成');}
} 
</script>