第三十四篇生命周期

第三十四篇生命周期 - 易理解

news2024/11/24 0:16:39

通过之前一系列内容的推进来到生命周期的内容了，那么对于生命周期图示这块内容原文档内容有这么一段话：You don’t need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference.；什么意思呢？它是不需要你立马弄明白生命周期图示里面的所有内容，而是通过不断的一个学习和使用后才会有参考的价值！下面可以简单的来看一下图示（附中文版本图示）；

生命周期就有这么八个，分为四组，分别是 beforeCreate(创建之前)、created(创建完成)，beforeMount(挂载之前)、mounted(挂载完成)，beforeUpdate(更新之前)、updated(更新完成)，beforeDestory(销毁之前)、Destoryed(销毁完成)；在生命周期当中并不是每一个都很常用，也就那么几个，但是依然需要去了解关注事件在什么时候触发的，为什么会在这个地方触发而不是在其他地方，也即是它触发的时机；下面就简单的来了解一下为后续的内容做基础；

生命周期

<div id="app"></div>
<script>
new Vue({
    el:'#app',
    data:{
        author:'lhxz'
    },
    methods:{},
    // 生命周期与data,methods平级
    // beforeCreate 创建之前
    beforeCreate(){
        console.log("beforeCreate",this.author);
    },
    // created 创建完成
    created(){
        console.log("created","初始化",this.author);
    },
    // beforeMounted 挂载之前
    beforeMount(){
        console.log("beforeMount","DOM挂载之前");
    },
    // mounted 挂载完成
    mounted(){
        console.log("mounted","DOM挂载完成了，访问DOM","做事件监听，发ajax请求,设置定时器");
    },
    // beforeUpdate 更新之前
    beforeUpdate(){
        console.log("beforeUpdate","更新之前");
    },
    // updated 更新完成
    updated(){
        console.log("updated","更新完成");
        console.log("updated","获取更新完成之后的DOM,依赖DOM操作的库,需要知道状态更新完,什么时候DOM更新");
    },
    // beforeDestory 卸载之前
    beforeDestory(){
        console.log("beforeDestory","卸载前");
    },
    // Destory 卸载完成
    Destory(){
        console.log("Destory","卸载完成");
    }
})
</script>

可以知道的是在控制会打印出前四个的内容；后面四个都尚未被触发；

从控制台打印的内容来看以及结合图示，在 beforeCreate 创建之前去打印 data 中定义的author，输出结果是一个undefined，可以看到在 beforeCreate 创建之前 Vue实例刚在内存当中创建出来，并未初始化好 data 和 methods ；到 created 创建完成，此时实例已经在内存当中创建完成了，此时的 data 和methods 已经初始化完成，能够打印出data中的author，但还没有开始编译模板；到befortMount 挂载之前，此时已经完成了模板的编译，但还没有挂载到页面上去；当到mounted 挂载完成之时，DOM的挂载也就完成了，可以访问DOM，能够挂载到页面指定的容器当中，可以做一些事件监听，发ajax请求，设置定时器等之类的操作；

前面我们是通过点击来进行一个axios请求，现在可以直接在mounted()当中去发起axios的请求，这里可以将之前的fetch和axios请求的东西在mounted中去进行测试一下，那么这里就以axios的这篇内容进行，附上地址：第二十篇 axios使用

测试：与data和methods平级编写以下代码（这里的数据源自之前axios中模拟的数据）

mounted(){
        axios.get("fetch.json")
            .then(res=>{
                console.log(res);
            })
    }

测试效果：

在挂载完成时进行数据请求渲染在页面；ps: 进入网站时就会自动的去请求数据渲染在页面上，不需要像之前一样通过点击按钮发起请求获取数据在渲染在页面当中；

那么后面的两组先来第一组继续操作，也就是 beforeUpdate 和 updated ；为了能够更加直观下面来单独编写：

beforeupdate 更新之前，这时data当中的数据时最新的，但是在页面当中显示的数据依然时未更新之前的数据(旧数据)，因为此时并未开始进行对DOM节点进行渲染；

updated 更新完成，此时data当中的数据已经完成了对DOM节点的一个渲染，data 和页面当中的数据都是最新的。

思路：通过点击按钮更改data中author的数据，然后在beforeUpdate更新之前和在updated更新完成这两个生命周期进行对data数据和DOM节点进行打印；

测试代码编写：

<div id="app">
    <p>{{author}}</p>
    <button @click="handleChange">更新data数据</button>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        author:'lhxz'
    },
    methods:{
        handleChange(){
            this.author = 'LHXZ';
        }
    },
    beforeUpdate(){
        console.log("更新之前,data数据是最新的：",this.author,"DOM节点是旧数据");
        var app = document.getElementById('app');
        console.log(app.innerHTML);
    },
    updated(){
        console.log("更新完成(已挂载到页面)",this.author,"data和DOM节点都是新数据");
        var app = document.getElementById('app');
        console.log(app.innerHTML);
    }
})
</script>

测试效果：