前端进阶Vue框架-----组件生命周期

2022-02-21 19:31:27 阅读：166 来源： 互联网

标签：插件 Vue console 进阶 dom myname 生命周期 ----- log

每个组件都会有一个生命周期，创建之前的生命周期只能执行一次

<!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="/lib/vue.js"></script>
</head>
<body>
    <div id="box">

    </div>

    <script>
        new Vue({
            el:"#box",
            data:{
                myname:"xby"
            },

            // 创建阶段-----一生只会执行一次

            beforeCreate(){
                console.log("beforeCreate",this.myname)
            },
            created(){
                console.log("created","初始化状态或者挂载到当前实例的一些属性")
                this.myname = this.myname+"11111" //被截拦的状态

                this.user = localStorage.getItem("user") //this下面的属性

            },
            // 获取节点
            beforeMount(){
                console.log("beforeMount",this.$el) //模板解析之前最后一次修改模板节点
            },

            mounted(){
                console.log("mounted","拿到真实的dom节点",document.getElementById("box").innerHTML)
            //依赖于dom创建之后，才能进行初始化工作的插件 （轮播插件）
            //订阅 bus.$on
            //发ajax
            },
            // -------------------------------------------------------------------------------------------------

            // 更新阶段---代码修改多少次就会执行多少次

            beforeUpdate(){
                console.log("beforUpdate","更新之前，记录老的dom某些状态，比如滚动条")
            },

            updated(){
                console.log("updated","更新完成，获取更新后的dom，才进行swiper工作的插件")
            },

            // -----------------------------------------------------------------------------------------------------

            // 销毁阶段---一般是用在子组件

            // 两者用法一致
            beforeDestroy(){
                console.log("销毁之前","清除定时器，事件解绑，，，，")
            },

            destroyed(){
                console.log("销毁之后","清除定时器，实践解绑，，，")
            }


           
        })
    </script>
    
</body>
</html>

标签：插件,Vue,console,进阶,dom,myname,生命周期,-----,log
来源： https://blog.csdn.net/m0_61656944/article/details/123050303

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端进阶Vue框架-----组件生命周期