VUE3.0,DAY32,生命周期销毁流程

VUE3.0,DAY32

      • 销毁流程

销毁流程

销毁流程如下所示,就是当vm.$destroy被调用的时候,就启动销毁流程(即页面数据也不更新了,也不用vue管理了等等)。destroy具有销毁的意思。
VUE3.0,DAY32,生命周期销毁流程_第1张图片
我们自定义了一个销毁按钮,当点击的时候就启动销毁流程,如下图所示,先点击自加按钮,n的值变为2,然后点击销毁按钮,看到控制台console打印输出,已销毁已启动,然后此时在点击自加按钮,发现页面没反应了。这就是说vm已经被销毁了。然后vm被kill前,其工作成果还保留在了页面上(实现页面的n值为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 type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    script>
    
head>

<body>
    
    <div id="root">
        <h1> 当前的n值是:{{ n }}h1>
        <button @click="add"> 点我n + 1button>
        <button @click="bye">点我销毁vmbutton>
    div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            methods: {
                add() {
                    this.n++
                },
                //给点击事件配置相对应的函数bye
                bye() {
                    console.log('销毁已启动');
                    //调用销毁流程启动
                    this.$destroy()
                }
            },
            beforeCreate() {
                console.log('beforeCrate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');

            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeupdated');
            },
            updated() {
                console.log('updated');
            },
        })
    script>
body>

html>

VUE3.0,DAY32,生命周期销毁流程_第2张图片
根据其vue官网的说法,一旦调用了vm.$destory,那么vue实例,简写为vm,就被完全清除了,断开与其他部分的链接。VUE3.0,DAY32,生命周期销毁流程_第3张图片
注意:官网上说的事件监听器是指的一些自定义的事件。此案例中的@click=add点击事件是原生的DOM事件,所以不会被杀死。我们通过代码来验证下。点击下图中的自加按钮,观察控制台console输出,发现各部分都正常运行,当点击销毁按钮后,在点击自加按钮,虽然页面没反应,但是@click=add这个事件一直被调用。所以,官网说的解绑全部的事件监听器指的是自定义的事件。

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 type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    script>
    
head>

<body>
    
    <div id="root">
        <h1> 当前的n值是:{{ n }}h1>
        <button @click="add"> 点我n + 1button>
        <button @click="bye">点我销毁vmbutton>
    div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            methods: {
                add() {
                    //验证是否调用了自定义事件add
                    console.log('add');
                    this.n++
                },
                //给点击事件配置相对应的函数bye
                bye() {
                    console.log('销毁已启动');
                    //调用销毁流程启动
                    this.$destroy()
                }
            },
            beforeCreate() {
                console.log('beforeCrate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');

            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeupdated');
            },
            updated() {
                console.log('updated');
            },
        })
    script>
body>

html>

VUE3.0,DAY32,生命周期销毁流程_第4张图片
beforeDestroy是临近销毁前执行的生命周期函数,destroyed是销毁完毕执行生命周期函数。绿色框内就是解绑一些监听事件,一些指令等的过程。
VUE3.0,DAY32,生命周期销毁流程_第5张图片
注意:这些生命周期函数又叫生命周期钩子。

你可能感兴趣的:(前端,vue.js,javascript,node.js)