vue生命周期钩子函数

最新推荐文章于 2022-07-04 10:38:06 发布

杨不旧

最新推荐文章于 2022-07-04 10:38:06 发布

阅读量277

点赞数

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

本文链接：https://blog.csdn.net/qq_45152044/article/details/123020859

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前言

看本文可同时参考官方文档。点击跳转

什么是生命周期？

一个东西从出生到死亡

什么是钩子函数？

提前在对象内部预埋的函数，这些函数会在规定的情况下执行。

vue的生命周期

在vue不同的时期，会执行一些特定的函数

beforeCreate创建前：数据和容器都没有加载
created创建后：刚读取完数据，还没有找到容器

beforeMount挂载前：读完完数据，并找到容器，但是容器里的数据还未替换
mounted挂载后：读完完数据，并找到容器，容器里的数据已替换，所谓挂载就是m和v建立联系。

beforeUpdate数据更新前：
updated数据更新后：
两个都需要在数据更新时候才能触发，如v-model

beforeDestroy销毁前：
destroyed销毁后：
一般都是点击一个按钮触发一个函数销毁： this.$destroy();
销毁后，如vue的一些指令就无法体现出来了

示例：

<!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>
</head>
<body>
    <div id="app">
        <p>{{time.y}}年{{time.M}}月{{time.d}}日 {{time.h}}:{{time.m}}:{{time.s | toDub2}} {{time.week | toCnWeek}}</p>
        <input type="text" v-model="msg">
        <span>{{msg}}</span>
        <button @click="des">销毁vue</button>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    Vue.filter('toDub2',function(v){
        //个位数补0
        return v<10?'0'+v:''+v;
    })
    Vue.filter('toCnWeek',function(v){
        //显示星期几
        return '星期'+'日一二三四五六'[v]
    })
    
    new Vue({
        el:'#app',
        data:{
            msg:'',
            time:{
                y:2022,
                M:02,
                d:17,
                h:14,
                m:08,
                s:0,
                week:'星期四'
            }
        },
        methods:{
            des:function(){
                this.$destroy();
            },
            toDub:function(n){
                return n<10?'0'+n:''+n
            },
            colck:function(){
                let oDate=new Date();
                this.time={
                    y:oDate.getFullYear(),
                    M:this.toDub(oDate.getMonth()+1),
                    d:oDate.getDate(),
                    h:oDate.getHours(),
                    m:oDate.getMinutes(),
                    s:oDate.getSeconds(),
                    week:oDate.getDay()
                }
            }
        },
        beforeCreate:function(){//数据和容器都没有加载
            console.log('创建前',this.$data,this.$el)
        },
        created:function(){//刚读取完数据，还没有找到容器
            console.log('创建后',this.$data,this.$el)
        },
        beforeMount:function(){//读取完数据，找到了容器，但是数据还没有替换
            console.log('挂载前',this.$data,this.$el)
        },
        mounted:function(){//数据已经替换。 所谓的挂在就是让m和v建立联系
            console.log('挂在后',this.$data,this.$el)
            setInterval(this.colck,1000)//每隔一秒执行一次
            this.colck()//一上来就执行一次
        },
        beforeUpdate:function(){
            console.log('数据更新前')
        },
        updated:function(){
            console.log('数据更新后')
        },
        beforeDestroy:function(){
            console.log('销毁前')
        },
        destroyed:function(){
            console.log('销毁后')
        }
    })
</script>

杨不旧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue生命周期钩子函数

前言看本文可同时参考官方文档。点击跳转什么是生命周期？一个东西从出生到死亡什么是钩子函数？提前在对象内部预埋的函数，这些函数会在规定的情况下执行。vue的生命周期在vue不同的时期，会执行一些特定的函数beforeCreate创建前：数据和容器都没有加载created创建后：刚读取完数据，还没有找到容器beforeMount挂载前：读完完数据，并找到容器，但是容器里的数据还未替换mounted挂载后：读完完数据，并找到容器，容器里的数据已替换，所谓挂载就是m和v建立联系。bef
复制链接

扫一扫