vue的生命周期

最新推荐文章于 2024-08-19 10:59:54 发布

ㄗòs╃牸架

最新推荐文章于 2024-08-19 10:59:54 发布

阅读量846

点赞数

分类专栏： vue html javascript 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Drunk_Invader/article/details/124017368

版权

javascript 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

html

27 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

beforeCreate 创建之前
created 创建之后
befreMount 渲染之前
mounted 渲染之后
beforeUpdate 更新前
updated 更新
beforeDestroy 销毁之前
destroyed 销毁
对象.$destory() 销毁对象

    <body>
        <div id="app">
            <h1 id="box" @click="change()">{{msg}}</h1>
        </div>

        <script src="../第一天/js/vue.js"></script>
        <script>
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'hello'
                },
                methods:{
                    change(){
                        this.msg+=1;
                    }
                },
                // 生命周期说明的就是组件从创建到销毁的过程
                // 创建之前
                beforeCreate:function(){
                    console.log('beforeCreate..............');
                    console.log(this.msg);
                    console.log(box.innerHTML)
                },
                // 创建完毕
                created:function(){
                    console.log('created..............');
                    console.log(this.msg);
                    console.log(box.innerHTML)
                },
                // 挂载之前
                beforeMount:function(){
                    console.log('beforeMount..............');
                    console.log(this.msg);
                    console.log(box.innerHTML)

                },
                // 挂载完毕
                mounted:function(){
                    // 一般此时进行ajax请求
                    console.log('mounted..............');
                    console.log(this.msg);
                    console.log(box.innerHTML)
                },
                // 数据更新之前
                beforeUpdate:function(){
                    console.log('beforeUpdate.........');
                    console.log(this.msg);
                    console.log(box.innerHTML)
                },
                // 数据更新了
                updated:function(){
                    console.log('updated.........');
                    console.log(this.msg);
                    console.log(box.innerHTML)
                },
                beforeDestroy:function(){
                    console.log('销毁之前.........');
                },
                destroyed:function(){
                    console.log('销毁了.........');
                }
            })
            // 选择对象.$destroy()  销毁对象