vue 生命周期 创建 挂载 更新 销毁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
            <h2 ref="h2">{{msg}}</h2>
            <button @click="handleUpdate">更新</button>
    </div>


    <button onclick="handleDestroy()">销毁</button>
</body>
</html>
<script src="vue.js"></script>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            msg:1910
        },
        methods:{
            handle(){

            },
            handleUpdate(){
                this.msg = 1907
            }
        },
        beforeCreate() {
            console.log(this.msg)
            console.log("beforeCreate")
        },
        created() {
            console.log(this.msg,this.handle)
            console.log("created")
        },
        beforeMount() {
            console.log(document.getElementById("app").innerHTML)
            this.msg = "哈哈哈"
            console.log("beforeMount")
        },
        mounted() {
            console.log(document.getElementById("app").innerHTML)
            console.log("mounted")
            console.log(this.$refs.h2)
        },
        beforeUpdate() {
            this.msg = "不要睡觉了";
            console.log("beforeUpdate")
        },
        updated() {
            console.log(this.$refs.h2)
            console.log("updated")

        //   if(!this.swiper){
        //     this.swiper =  new Swiper()
        //   }
        },
        beforeDestroy() {
            console.log("beforeDestroy")
        },
        destroyed() {
            console.log(this.$refs.h2)
            console.log(this.msg);
           
            console.log("destroyed")
        },
    })

    function handleDestroy() { 
        vm.$destroy()
     }
/*
    什么是生命周期:
        一个组件从创建到销毁的过程叫做生命周期

    beforeCreate:创建前
        当组件初始化的时候会执行beforeCreate,在当前生命周期中我们是无法访问到data中的属性以及methods中的方法
        因为当前生命周期是初始化阶段因此我们可以在当前生命周期中加一个loading等待组件加载完毕以后再移除掉loading

    created:创建后
        1、当前生命周期可以访问到data中的属性以及methods身上的方法。
        2、当前生命周期执行的时候会将data身上的所有属性遍历添加getter/setter方法。
        3、当前生命周期执行的时候会将data与methods身上所有的属性和方法遍历到vm的实例身上
        4、因为当前生命周期会遍历data身上的属性添加getter/setter,因此我们可以在当前生命周期函数中进行前后端数据的交互
    
    beforeMount:挂载前
        当前生命周期是数据和模板还未进行结合,我们可以在当前生命周期中做数据最后的更改
    
    mounted:挂载后
        当前生命周期是数据和模板进行相结合,我们可以在当前生命周期中获取到真实的DOM结构
        我们可以在当前生命周期中做方法的实例化例如(swiper,echarts....)

        如何获取到真实的DOM结构?
            通过给元素添加ref属性   在mounted中通过this.$refs.属性即可获取
    
    beforeUpdate:更新前
        在当前生命周期中是更新的数据与模板还未进行相结合,因此我们可以对更新的数据做最后的修改

    updated:更新后
        更新的数据与模板以及进行相结合,在当前生命周期中我们可以获取到数据更新后最新的DOM结构



        
    beforeDestroy:销毁前
        在当前是生命周期中我们仍然可以获取到真实的DOM结果因此我们可以做事件的移除,事件的解绑等

    destroyed:销毁后
        在当前生命周期中我们访问不到真实的DOM结构了,以及当前的Vm与页面之间的关联也断开了
    


    注意:
        beforeUpdate与Updated这两个生命周期会多次执行。因此在这两个生命周期中做逻辑操作的时候一定要加
        条件处理,否则会极度浪费性能
*/
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值