vue的生命周期

作者: 小蜜蜂_1d30 | 来源:发表于2022-04-15 23:49 被阅读0次

vue生命周期
vue生命周期
Vue生命周期
vue3较vue2的特别之处 - 生命周期
前端之路-VUE面试题
Vue.js入门（二）：生命周期
vue生命周期
Vue 生命周期
vue学习记录
vue生命周期

lifecycle.png

<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8"/>
<title></title>
<script src="./vue.js"></script>
</header>
<body>
<div id="app">
    <button @click="message='下班'">修改data</button>
    <h3 id="h3">{{message}}</h3>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"我是message",
        },
        methods:{
            show:function(){
                console.log("this is show function")
            }
        },
        beforeCreate(){//这是遇到的第一个生命周期函数,表示实例完全被创建之前可以执行它
            //console.log(this.message);
            ///console.log(this.show());
            //注意：在beforeCreate生命周期函数执行的时候data和methods都还没被初始化
        },
        created(){//这是遇到的第二个生命周期函数
            console.log(this.message);
            console.log(this.show());
            //在created中data和methods都已经初始化了
            //如果要执行methods中的方法，或者操作data中的数据，最早只能在created中操作
        },
        beforeMount(){//这是遇到的第三个周期函数，表示模板已经编译完成，但是尚未把模板渲染到页面上
          console.log(document.getElementById("h3").innerText)
        //在beforeMount执行的时候，页面中的元素还没有被替换过来，还是之前的
        },
        mounted(){//这是遇到的第四个生命周期函数，内存中的模板已经渲染到页面上，页面已经被渲染好了 ，mounted是实例创建期间的
            //的最后一个函数，当执行完mounted函数，表示实例已经完全创建好了，此时，如果没有其他操作的话，这个实例就静静的躺在内存中，一动不动
        },
        //接下来的是运行中的两个事件
        beforeUpdate(){
            //这时候，表示我们的界面还没有被更新[数据更新了吗？更新了]
            //console.log('界面上的元素内容'+document.getElementById('h3').innerText);
            //console.log("data数据"+this.message)
            //结论：当执行beforeUpdate时，页面上的数据还是旧的，此时data数据是最新的，两者尚未同步
        },
        updated(){
            console.log('界面上的元素内容:'+document.getElementById('h3').innerText);
            console.log("data数据:"+this.message)
            //updated执行时，页面和data的数据都已经是最新的了
        }

    })
  </script>
</body>
</html>