生命周期函数:

重点

<body>
    <div id='app'>
        {
     {
     msg}}

        <div>1231</div>
        {
     {
     num}}

        <input type="text" v-model="msg">
    </div>
    <script>
    const vm = new Vue({
     
        el: '#app',
        data: {
     
            msg:"hello word",
            num:1
        },
        // 生命周期函数  数据还未初始化  一般用来重定向
        beforeCreate() {
     
            console.log("这个是我们接触的第一个生命周期函数");

            console.log(this.msg);
        },
        // 一般数据请求  数据初始化
        created() {
     
            console.log("这个是我们接触的第二个生命周期函数");
            console.log(this.msg);
        },
        // 虚拟dom就绪,但是未挂载到页面  
        beforeMount() {
     
            console.log("这个是我们接触的第3个生命周期函数  beforeMount");
            debugger
        },

        // dom已经挂载更新  关于dom的操作都在这里面
        mounted() {
     
            console.log("这个是我们接触的第4个生命周期函数  mounted");
        },
        // 此时data里面数据是新的,但是页面未更新, 第一次没有更新不走该生命周期函数,会多次触发
        // 避免异步里面修改数据
        beforeUpdate() {
     
            console.log("这个是我们接触的第5个生命周期函数  beforeUpdate");

            setInterval(()=>{
     
                this.num++
            },1000)
           
        },

        updated() {
     
            console.log("这个是我们接触的第6个生命周期函数  updated");
        },
        // 组件销毁前,主要用于清空计时器
        beforeDestroy() {
     
            console.log("这个是我们接触的第7个生命周期函数  updated");
        },

        destroyed() {
     
            console.log("这个是我们接触的第8个生命周期函数  updated");
        },
    })

        // vm.$mount("#app")

    </script>
</body>

你可能感兴趣的:(vue)