Vue_生命周期&钩子函数

• 生命周期：就是从创建vue实例到销毁的整个过程。
• 该过程中也会运行一些叫做生命周期钩子的函数
• 用户可在不同阶段添加自己的代码。

8个钩子函数：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

代码演示：

<div id="app">
    <p>{{msg}}</p>
    <button @click="isRender">点我渲染</button>
    <test v-if="isRend"></test>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var test = {
        template:"<div>我是一个局部组件</div>",
        created(){
            console.log(1,"初始化了组件的数据");
        },
        beforeDestroy(){
            console.log(2,"组件开始销毁")
        },
        destroyed(){
            console.log(3,"组件销毁完成！")
        } 
    }
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            isRend:true
        },
        methods:{
            isRender(){
                this.isRend = !this.isRend;
            }
        },
        components:{//演示销毁钩子函数---destroyed
            test:test
        },
        beforeCreate(){
            console.log("1、初始化了生命周期");
            console.log(this.$data)//undefined
        },
        created(){//可以Ajax请求
            console.log("2、初始化了活动对象");
            console.log(this.$data)//{__ob__: Observer}
            console.log("在这个钩子函数里面通常可以进行ajax请求***")
        },
        beforeMount(){
            console.log("3、进入渲染函数，但还没有渲染");
            //$el：就是vue实例化的渲染模板，这里即是vm
            console.log(this.$el);
            console.log(this.$el.innerHTML);//{{msg}} 数据还没有被渲染
        },
        mounted(){//可以操作事件了！！！
            console.log("4、模板渲染完成")
            console.log(this.$el);
            console.log(this.$el.innerHTML);//hello 数据渲染了
            var _p = document.querySelector("p")
            _p.addEventListener("click",function(){
                alert("点我干嘛！")
            })
            console.log("可以在此进行dom操作")
        },
        beforeUpdate(){//每当改变数据的时候都会触发
            console.log("5、数据发生了变化，但还没有完成")
            console.log(this.$el);
            console.log(this.$el.innerHTML);//<p>hello 改成 world</p>
        },
        updated(){//每当改变数据的时候都会触发---数据监听
            console.log("6、数据发生了变化，并且已经完成")
            console.log(this.$el);
            console.log(this.$el.innerHTML);//<p>延迟器改变数据 msg</p>
        },
        //上面拿组件做例子观察销毁
        beforeDestroy(){
            console.log("7、vue实例销毁前触发")
        },
        destroyed(){
            console.log("8、vue实例已经销毁了！")
        }
    })
    vm.msg = "hello 改成 world";//改变数据
    setTimeout(()=>{
        vm.msg="延迟器改变数据 msg"
    },2000)
</script>

重点总结：

• created 创建钩子函数 可以Ajax请求数据
• mounted 渲染钩子函数 可以进行dom操作，比如添加事件。
• updated 更新钩子函数 可以监听数据改变
• destroyed 销毁钩子函数 可以监听是否被销毁，（是否在文档中不渲染）