• 【生命周期】

    生命周期

    1 引出生命周期

    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>引出生命周期title>
    <script src="../JS/vue.js">script>
head>
<body>
    

    <div id="root">
        
        
        <h2 :style="{opacity}">欢迎学习Vueh2>
    div>
body>
<script>
    Vue.config.productionTip = false

    // const vm = new Vue({
    new Vue({
        el: '#root',
        data: {
            opacity:1
        },
        methods:{

        },
        // Vue完成模板的解析并把初始的真实的DOM元素挂载(放入)页面后调用mounted()函数
        mounted(){
            setInterval(() => {
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16);
        }
    })

    // 通过外部的循环定时器实现(不推荐)
    /* setInterval(() => {
        vm.opacity -= 0.01
        if(vm.opacity <= 0) vm.opacity = 1
    },16); */
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    在这里插入图片描述

    2 分析生命周期

    在这里插入图片描述

    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>分析生命周期title>
    <script src="../JS/vue.js">script>
head>
<body>


    <div id="root">
        <h2 v-text="n">h2>
        <h2>当前的n值是：{{n}}h2>
        <button @click="add">点我n+1button>
        <button @click="bye">点我销毁vmbutton>
    div>
body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            n:1
        },
        methods:{
            add(){
                console.log('add');
                this.n++
            },
            bye(){
                console.log('bye');
                this.$destroy()
            }
        },
        watch:{
            n(){
                console.log('n变了');
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
            // console.log(this); // 此时vm里没有_data、vm.n、vm.add()
            // debugger; // 卡一个顿点
        },
        created() {
            console.log('created');
            // console.log(this); // 此时vm里有了_data、vm.n、vm.add()、getter()、setter()
            // debugger;
        },
        beforeMount() {
            console.log('beforeMount');
            // console.log(this); // 此时页面呈现的是未经编译的DOM结构
            // debugger;
        },
        mounted() { // 重要的钩子
            console.log('mounted');
            // console.log(this); // 此时页面呈现的是经过编译的DOM结构
            // debugger;
        },
        beforeUpdate() {
            console.log('beforeUpdate');
            // console.log(this.n); // 数据是新的 但页面是旧的
            // debugger;
        },
        updated() {
            console.log('updated');
            //console.log(this.n); // 数据是新的 页面也是新的
            // debugger;
        },
        beforeDestroy(){ // 重要的钩子
            console.log('beforeDestroy');
            // console.log(this.n); // 此时能拿到数据
            // this.add() // 此时调用了add() 但页面没发生变化
            // debugger;
        },
        destroyed() {
            console.log('destroyed');
            // debugger;
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85

    在这里插入图片描述

    3 总结生命周期

    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>总结生命周期title>
    <script src="../JS/vue.js">script>
head>
<body>
    

    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vueh2>
        <button @click="opacity = 1">透明度设置为1button>
        <button @click="stop">点我停止变换button>
    div>
body>
<script>
    Vue.config.productionTip = false

    // const vm = new Vue({
    new Vue({
        el: '#root',
        data: {
            opacity:1
        },
        methods:{
            stop() {
                // clearInterval(this.timer) // 清除定时器(温柔) 点击停止变换后再点透明度为1 透明度改变
                this.$destroy() // 暴力清除 点击停止变换后再点透明度为1不再发生变化 此时vm关了 但定时器没关
            }
        },
        // Vue完成模板的解析并把初始的真实的DOM元素挂载(放入)页面后调用mounted()函数
        mounted(){
            this.timer = setInterval(() => {
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16);
        },
        beforeDestroy() {
            clearInterval(this.timer) // 清除定时器
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    在这里插入图片描述

  • 相关阅读:
    Flutter: 发送 http 请求
    第六节：Vben Admin权限-后端控制方式
    Java学习第十九节之static关键字详解
    hive操作
    css3动画库及四方体
    Prime Protocol宣布在Moonbeam上的跨链互连应用程序
    Vue、React和小程序中的组件通信：父传子和子传父的应用
    【面向就业的Linux基础】从入门到熟练，探索Linux的秘密（二）
    Ubuntu20.04安装ROS
    红队打靶：Fowsniff打靶思路详解（vulnhub）
  • 原文地址：https://blog.csdn.net/weixin_64875217/article/details/133534604