vue第七天组件生命周期

最新推荐文章于 2022-04-01 18:08:22 发布

qq_40262972

最新推荐文章于 2022-04-01 18:08:22 发布

阅读量241

点赞数

分类专栏： vue 文章标签： vue 生命周期钩子函数初学

本文链接：https://blog.csdn.net/qq_40262972/article/details/95042860

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue初学day07

vue组件的生命周期

vue组件的生命周期

1.生命周期是什么：
组件从创建到销毁的一系列过程就叫做组件的生命周期
vue在整个生命周期中为我们提供了一些钩子函数
钩子函数的特点就是会在生命周期的某一时刻去进行触发
2.组件的生命周期分为三个过程
初始化运行中销毁

1.初始化阶段    beforeCreate  created  beforeMounted mounted
2.运行中阶段	   beforeUpdate  updated
3.销毁阶段	   beforeDestroy destroyed

<body>
    
    <div id="app"> 
        <my-component></my-component>
    </div>
    <!--虚拟dom-->
    <template id="my-component">
        <div>
            <h1 id="title">hello! {{message}}</h1>
            <p><input type="text" v-model="message"></p>
            <p><button @click="destroy">组件销毁了！</button></p>
        </div>
    </template>
    <script>
        //1.一个组件或者实例的生命周期都是从new创建开始的
        //2.实例化之后，内部会进行初始化的事件与生命周期相关的配置
        Vue.component("my-component",{
            template:"#my-component",
            data(){
                return {
                    message:1
                }
            },
            methods:{
                destroy(){
                    this.$destroy();//销毁组件
                }
            },
            
            //3.这个钩子函数内部获取不到数据,dom元素也不能渲染出来。此钩子函数基本不会做任何事情
            beforeCreate(){
                console.log("beforeCreate...");
                console.log(this.message,document.getElementById("title"));
                //undefined,null
            },
            
            //4.此钩子函数，数据已经挂载了。但是dom元素还是没有渲染出来 null的
            //这个钩子函数如果同步的更改数据，不会影响运行时钩子函数的。 
            //1.可以用来发送ajax请求！  2.也可以做一些初始化事件的操作。
            created(){
                console.log("created...")
                this.timer = setInterval(() => {
                    console.log(111111111111111)
                    this.message++
                }, 2000);
                console.log(this.message,document.getElementById("title"))
                //1,null
            },
            
            //5 下面就是组件或者实例去查找各自的模板，然后将其编译成虚拟dom放入到render函数中。
            //6 beforeMount这个钩子函数代表dom节点马上就要被渲染出来了，但是还没有渲染出来。
            //此钩子函数与created钩子函数差不多，都是可以进行ajax请求与初始化事件的操作。
            beforeMount(){
                console.log("beforeMount...")
                console.log(this.message,document.getElementById("title"))
            },//1,null
            // render(){
            
            //7. 生成好了虚拟dom，然后去替换对应的el,渲染成真实dom   做一个初始化的渲染过程
            //     console.log("render")
            // }
            
            //8.mounted是生命周期初始化阶段的最后一个钩子函数了
            //这个钩子函数数据早就拿到了，同时dom元素也已经渲染出来了。
            mounted(){
                console.log("mounted...")
                console.log(this.message,document.getElementById("title"))
            },//1,<h1 id="title">hello! {{message}}</h1>
            
            //9 beforeUpdate钩子函数当数据发生改变的时候会立马执行
            //数据改变的时候，只会获取到更新前的值。
            //所以说这个钩子函数内部千万不要数据进行更改操作，会造成死循环
            beforeUpdate(){
                //this.message++
                console.log("beforeUpdate...",document.getElementById("title").innerHTML)
            },
            //10 updated钩子函数获取到的是更新之后的内容
            //内部操作： 生成新的虚拟dom,跟上一次的虚拟dom结构进行对比，对比出来差异后进行渲染更新
            updated(){
                console.log("updated...",document.getElementById("title").innerHTML)
            },
            //11 销毁前可以在这个钩子函数里面做一些善后的操作   例如可以清除一些事件（初始化阶段）
            
            beforeDestroy(){
                console.log("beforeDestroy...")
                //清除定时器操作
                clearInterval(this.timer)
            },
            //销毁组件  意味着组件的双向数据绑定没了、事件监听器watcher也都被移除掉了
            //但是组件的dom结构还是存在的
            destroyed(){
                console.log("destroyed...")
            }
        })


        new Vue({}).$mount("#app");

      
    </script>
</body>

运行结果如下
这是运行结果
这是定时器引发的数据更新
且数据每次更新都触发
beforeUpdate 和updated这两个钩子函数
定时器改变数据

明天通过一个swiper实例来更加深入的理解生命周期钩子函数

qq_40262972

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue第七天组件生命周期

vue初学day07vue组件的生命周期vue组件的生命周期1.生命周期是什么：组件从创建到销毁的一系列过程就叫做组件的生命周期vue在整个生命周期中为我们提供了一些钩子函数钩子函数的特点就是会在生命周期的某一时刻去进行触发2.组件的生命周期分为三个过程初始化运行中销毁1.初始化阶段 beforeCreate created beforeMounted mount...
复制链接

扫一扫