首页 > 其他分享 >VUE四个生命阶段和8个钩子函数的执行及其实现效果------VUE框架

VUE四个生命阶段和8个钩子函数的执行及其实现效果------VUE框架

时间:2023-12-03 12:32:21浏览次数:30  
标签:VUE console log 钩子 销毁 阶段 ------ 挂载

VUE四个生命阶段和8个钩子函数的执行及其实现效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}:{{count}}</h1>
        <button @click="add()">按一下加一</button>
        <button @click="destroy()">按下销毁VM</button>
    </div>
    <script>
        // 初始阶段,挂载阶段,更新阶段,销毁阶段
        // 一共是四个阶段,八个钩子函数
        // 初始阶段beforeCreate创建前,created创建后
        // 挂载阶段beforeMount挂载前,mounted挂载后
        // 更新阶段beforeUpdate更新前,updated更新后
        // 销毁阶段beforeDestroy销毁前,destroyed销毁后
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                count : 1
            },
            methods : {
                add()
                {
                    this.count++;
                },
                destroy()
                {
                    this.$destroy();
                }
            },
            // 初始阶段
            beforeCreate(){
                console.log("VUE对象初始化了");
            },
            created(){
                console.log("created");
            },
            // 挂载阶段
            beforeMount(){
                console.log("VUE对象挂载了");
            },
            mounted(){
                console.log("mounted");
            },
            // 更新阶段
            beforeUpdate(){
                console.log("VUE对象的data更新了");
            },
            updated()
            {
                console.log("updated");
            },
            // 销毁阶段
            beforeDestroy(){
                console.log("VM对象销毁了");
            },
            destroyed()
            {
                console.log("destroyed");
            }
        });
    </script>
</body>
</html>

标签:VUE,console,log,钩子,销毁,阶段,------,挂载
From: https://blog.51cto.com/u_16322355/8666482

相关文章

  • Java零基础-泛型
    前言Java作为一门面向对象的编程语言,虽然有其独特的优势,但是在一些特定的场景下,其灵活性与扩展性并不尽如人意。其中一个重要的原因就是Java中的类型转换机制,这在项目开发过程中很容易导致一些问题,比如:类型安全问题、代码重复问题、代码可读性问题等等。针对这些问题,Java提供了一......
  • SpringBoot如何使用@Scheduled创建定时任务?
    前言随着软件业务日益复杂,有时候需要创建一些定时任务以满足特定业务需求。在Java编程语言中,使用Spring框架可以轻松地创建出定时任务。SpringBoot作为Spring框架中的一员,在创建定时任务方面也提供了便利性和灵活性。本文将介绍SpringBoot如何使用@Scheduled创建定时任务。摘要......
  • 无涯教程-Erlang - Maps(映射)
    Maps中的每个键-值(key-value)关联称为关联对,该对中的键和值部分称为元素,关联对的数量被称为Map的大小。我们定义了具有2个Maps的MapM1,map_size是用Erlang定义的内置函数,可用于查看Map的大小。-module(helloLearnfk).-export([start/0]).start()->M1=#{name=>john......
  • AtCoder_abc326
    T12UP3DOWN简单的if判断,做题一分钟,翻译十分钟。。。代码:#include<bits/stdc++.h>usingnamespacestd;intmain(){ intx,y;cin>>x>>y; if((x<=y&&y-x<=2)||(x>y&&x-y<=3)) cout<<"Yes"; elsecout<<"No&......
  • AtCoder_abc327
    T1ab循环从s[0]到s[n-2]判断有无ab相邻T2A^A两层循环枚举就可以了由于aa会增长的很快,所以当a=16时aa就已经大于$10^{18}$了,一定不会T就这么点数打表也能过T3NumberPlace就是数独的判断规则,h,l,g三个数组存储已有的数就好宫的判断我用了一个三维数组前两个维度表示宫的......
  • AtCoder_abc329
    AtCoder_abc329比赛链接A-SpreadA题链接题目大意输入一个字符串由大写字母组成的$S$,输出$S$并在每一个字符之间加上空格解题思路随便打打就能过.jpg代码//Problem:A-Spread//Contest:AtCoder-SkyInc,ProgrammingContest2023(AtCoderBeginnerContest329)//......
  • 整合springboot+mybatisplus+mysql+swagger,开发后端接口
    一、版本1.springboot:2.7.82.mybatisplus:3.5.3.13.mysql:8.04.swagger:3.0二、建立数据表(省略表结构)三、新建maven工程及springboot项目1.完成后的项目目录:2.maven工程的pom文件引入依赖:点击查看代码<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http......
  • AtCoder_abc330
    AtCoder_abc330比赛链接A-CountingPassesA题链接题目大意给出$N$个数$a_1,a_2,a_3\cdots,a_N$,和一个正整数$L$。输出有几个$a_i\leL$.解题思路O(n)遍历一遍就好了代码//Problem:A-CountingPasses//Contest:AtCoder-TOYOTASYSTEMSProgrammingContest20......
  • 维吉尼亚
    一喵星人要想喵星发送一段不知道干什么用的密码“BLOCKCIPHERDESIGNPRINCIPLE”,但是它忘记了密钥是什么,手头(爪头)只有它自己加密过的密钥“HTRUZYJW”,而且它还知道原密钥是一个单词,你可以帮助它传递信息,早日攻克蓝星,征服人类吗?密钥“HTRUZYJW”这个比较容易联想用凯撒密......
  • AtCoder_abc331
    AtCoder_abc331(这次题真的真的真的好难)比赛链接A-Tomorrow题目链接题目大意有一个$M$个月,$D$天的日历,请输出$y年m月z日$的下一天。解题思路先让天数加一,如果超过了$D$就让月份加一,天数减$D$,然后月份同理代码//Problem:A-Tomorrow//Contest:AtCoder-DaiwaSec......