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

最新推荐文章于 2023-10-27 18:46:43 发布

鲸是鲸鱼的鲸

最新推荐文章于 2023-10-27 18:46:43 发布

阅读量255

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44195250/article/details/97393284

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!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>