vue 生命周期函数使用方法及理解_v中生命周期如何使用-CSDN博客

本文链接：https://blog.csdn.net/qq_48455736/article/details/125319679
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
       
        <div class="box">
            {{message}}
        </div>
        <button @click="changemessage">点击</button>
    </div>
    <script>
        // 生命周期：从创建到销毁的过程，vue会提供生命周期的事件钩子
        // 事件钩子 也是 配置项里的内容
        // 1.el 2.data 3.methods 4.computed 5.watch 6.render 7.template
        // 生命周期 一、初始化  二、更新  三 销毁
        /* 
        // 一、初始化阶段
            beforeCreate()
                初始化阶段，应用不多
            created() ：ajax :数据准备完成，dom还没有生成
            在实例创建完成后被立即调用，该阶段完成了对 data 中的数据的 observer，该阶段可以处理一些异步任务
            beforeMount()
            在挂载开始之前被调用，应用不多
            mounted() ：已经可以获取真实的dom结构，可以进行dom操作
            该阶段执行完了模板解析，以及挂载。同时组件根组件元素被赋给了 $el 属性，该阶段可以通过 DOM 操作来对组件内部元素进行处理了

        二、更新阶段 （有改变）
            beforeUpdate()
            数据更新时调用，但是还没有对视图进行重新渲染，这个时候，可以获取视图更新之前的状态
            updated()
            由于数据的变更导致的视图重新渲染，可以通过 DOM 操作来获取视图的最新状态
        三、销毁阶段
            beforeDestroy()
            实例销毁之前调用，移除一些不必要的冗余数据，比如定时器
            destroyed()
            Vue 实例销毁后调用
        */
      let vm =   new Vue({
            el:"#app",
            data:{
                message:"数据",
                timer:0
            },
            methods:{
                changemessage(){
                    this.message = "修改了";
                }
            },
            beforeCreate:function(){
                console.log("beforeCreate");
            },
            created(){
                console.log("created，数据准备完毕，ajax");
               
            },
            beforeMount(){
                console.log("beforeMount");
            },
            mounted(){
                console.log("mounted：真实的dom已经生成")
               this.timer =  setTimeout(() => {
                    console.log("定时器");
                }, 3000);
                // console.log(document.querySelector(".box"));
            },
            beforeUpdate(){
                console.log("beforeUpdate",this.message);
            },
            updated(){
                console.log("updated",this.message);
            },
            beforeDestroy(){
                clearTimeout(this.timer);
                // 收尾工作：清空登录状态 ，开启的定时器 
                console.log("beforeDestroy");
            },
            destroyed(){
                console.log("destroyed");
            }
            // template:"<h1>我是标题</h1>"
            // render(createElement){
            //     let vdom = createElement("div","我是div");
            //     console.log(vdom);
            //     return vdom;
            // }
        })
        // vm.$destroy();  // 手动销毁实例化对象

    </script>
</body>
</html>