vue05-Vue实例的生命周期

最新推荐文章于 2022-11-26 14:54:23 发布

xiaoyurainzi

最新推荐文章于 2022-11-26 14:54:23 发布

阅读量107

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/xiaoyurainzi/article/details/111392821

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

生命周期

一、Vue实例的生命周期

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，就是Vue实例的生命周期。

二、生命周期钩子

生命周期钩子：就是生命周期事件的别名。生命周期钩子又叫生命周期函数也叫生命周期事件。

创建期间的生命周期函数：

三钩子函数

beforeCreate
created
beforeMount
mounted
beforeUpdate
update
beforeDestroy
destroyed

create

let vm = new Vue()

mount

挂载，把div挂载到组件中

update

let vm = new Vue({
    el: '#box',
    data: {
        isShow: true    // 修改这个内容
    },
    methods: {
        handleClick() {
            console.log('我是根组件')
        }
    }
})

1.bedoreCreate

2.created

3.beforeMount

4.mounted（用得最多）

这时候可以向后端发送数据了

5.beforeUpdate

6.updated

7.beforeDestroy

8.destroyed

组件销毁 - 给组件写一个定时器

setTimeout()    // 延迟3s干什么事
setInterval()    // 延迟3s干什么事

定时任务

    setInterval(
        function () {
            alert(444)
        },3000
    )//每隔3s钟干什么事
12345

延迟任务

    setTimeout(
        function () {
        alert(33333)
    },3000) //延迟3s钟干什么事

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <child v-if="isShow"></child>

    {{name}}

</div>


</body>
<script>

    Vue.component('child', {
        template: `
        <div>我是组件的div</div>`,
        data(){
            return {
                t:null,
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            //用的最多，向后端加载数据，创建定时器等
            console.log("页面已被vue实例渲染, data, methods已更新");
            console.log('mounted')
            //起一个定时器，每隔三秒，打印一行
            this.t = setInterval(function () {
                console.log('daada')
            }, 3000)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            //组件销毁，清理定时器
            clearInterval(this.t)
            this.t = null
            console.log('destroyed')
        },
    })


    var vm = new Vue({
        el: '#box',
        data: {
            name:'lqz',
            isShow:true
        },
        beforeUpdate() {
            console.log('根的---beforeUpdate')
        },
        updated() {
            console.log('根的---updated')
        },

    })
</script>
</html>

xiaoyurainzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue05-Vue实例的生命周期

生命周期一、Vue实例的生命周期从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，就是Vue实例的生命周期。二、生命周期钩子生命周期钩子：就是生命周期事件的别名。生命周期钩子又叫生命周期函数也叫生命周期事件。创建期间的生命周期函数：三钩子函数beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatebeforeDestroydestroyedcreatelet vm = new Vue()
复制链接

扫一扫