生命周期

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 还有三个待更新

定义：

又名：生命周期回调函数、生命周期函数、生命周期钩子；
Vue在关键时刻帮我们调用的一些特殊名称的函数；
名称不可更改，函数的具体内容根据实际情况编写；
生命周期函数中的this指向的是vm 或 组件实例对象

常用的生命周期钩子：

mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等；
beforeDestroy：清除定时器、解绑自定义事件、取消订阅等；

关于销毁Vue实例：

销毁后Vue开发者工具看不到任何信息；
销毁后自定义事件会失效，但原生DOM事件依然有效；
一般不在beforeDestroy操作数据，在这个钩子函数中即使操作了数据，也不会再触发更新流程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- <h2 :style="{opacity: opacity}">你好，孙笑川</h2> -->
    <h2 :style="{opacity}">你好，孙笑川</h2>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            opacity: 1
        },
        //Vue完成模板解析，并把初始的真实DOM元素放入页面后调用mounted
        mounted() {
            console.log('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>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">销毁vm</button>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    const vm = new Vue({
        el: '#root',
        // template: `
        //   <div>
        //       <h2>当前的n值是：{{n}}</h2>
        //       <button @click="add">点我n+1</button>
        //   </div>
        // `,
        data: {
            n: 1
        },
        methods: {
            add() {
                console.log('add');
                this.n++
            },
            bye() {
                console.log('销毁vm');
                this.$destroy();
            }
        },
        watch: {
          n() {
              console.log('n变了')
            }
        },
        beforeCreate() {
            //无法通过vm访问到data中的数据，methods中的方法
            console.log('beforeCreate')
        },
        created() {
            //可以通过vm访问到data中的数据，methods中的方法
            console.log('created')
        },
        beforeMount() {
            //页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作最终都不奏效
            console.log('beforeMount')
        },
        mounted() {
            //页面呈现的是Vue编译过的DOM结构，所有对DOM的操作均有效（Vue不推荐直接操作DOM）
            console.log('mounted')
        },
        beforeUpdate() {
            console.log('beforeUpdate')
            //页面和数据尚未保持同步
            //console.log(this.n)
            //debugger;
        },
        updated() {
            console.log('updated')
            //页面和数据保持同步
            //console.log(this.n)
            //debugger;
        },
        beforeDestroy() {
            console.log('beforeDestroy')
            //能访问数据，能调用方法，但销毁之前对数据的所有操作都不再会触发更新
            this.add()
        },
        destroyed() {
            console.log('destroyed')
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2 :style="{opacity}">你好，孙笑川</h2>
    <button @click="stop">停止变换</button>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            opacity: 1
        },
        methods: {
            stop() {
                clearInterval(this.timer)
            }
        },
        //Vue完成模板解析，并把初始的真实DOM元素放入页面后调用mounted
        mounted() {
            console.log('mounted');
            this.timer = setInterval(() => {
                this.opacity -= 0.01
                if (this.opacity <= 0) {
                    this.opacity = 1
                }
            }, 16)
        },
        beforeDestroy() {
            clearInterval(this.timer)
        }
    })
</script>
</body>
</html>

评论 (0)