【面试】生命周期详情解释及案例

最新推荐文章于 2023-12-24 13:38:43 发布

须臾不敢忘

最新推荐文章于 2023-12-24 13:38:43 发布

阅读量811

点赞数

文章标签：面试前端

本文链接：https://blog.csdn.net/m0_74331160/article/details/129014213

版权

第二个阶段：编译HTML模板并渲染到浏览器中

第三阶段：组件更新阶段

第四阶段：组件销毁阶段

1.什么是生命周期

所谓得生命周期是指该组件对象从开始到销毁回收的整个全过程

2.生命周期函数

在生命周期中被定义执行的函数我们称为生命周期函数，也称为钩子函数

3.vue2中生命周期的函数

整个组件从开始到销毁要经过生命周期的阶段，每到一个阶段，相对应的函数就会被执行

生命周期	含义
beforeCreate	在组件创建之前被调用
created	在组件创建之后被调用
beforeMount	模板编译、挂载之前被调用
mounted	模板编译、挂载之后被调用
beforeUpdate	组件更新之前被调用
updated	组件更新之后被调用
beforeDestory	在组件销毁之前被调用
destoryed	在组件销毁之后被调用

4.生命周期的阶段

生命周期的一共有三个阶段

组件的创建阶段：该生命周期的函数只能被执行一次

组件的运行阶段：该阶段的钩子会被调用多次

组件的销毁阶段：该阶段的生命周期也只能执行一次

5.生命周期图示

第一个阶段：组件创建阶段

new Vue()：创建组件的实例对象
Init Events & Lifecycle：初始化事件和生命周期函数
beforeCreate：组件中的props/data/methods这些尚未创建，都处于不可用状态，在实际开发过程中几乎没有用处
Init injections & reactivity：组件props/data/methods才开始初始化这些选项
created：组件中的props/data/methods这些数据已经初始化成功，但是这里不能访问页面的DOM元素，因为此时模板还没有被编译创建出来

   beforeCreate(){
     console.group('----1、beforeCreate--------');
     console.log('data',this.num);  //undefined
     console.log('methods',this.fn); //undefined
     console.log('props',this.ptitle);//undefined
     console.groupEnd()
   },
  created(){
    console.group('----2、created--------');
    console.log('data',this.num);//可以访问数据为0
    console.log('methods',this.fn);  //也可以访问
    console.log('props',this.ptitle); //也可以访问
    console.log('dom元素', this.$refs.titleDom); //不能访问，这里的数据为undefined，因为模板没有创建
    console.groupEnd()
  }

总结：在实际开发过程中beforeCreate几乎不用，created使用的比较多，一般情况在这里完成网络请求和后端交互，还有一些初始化的操作、创建定时器等功能

向后端发送网络请求的技术有三种

Ajax方式：这种方式存在的弊端就是 “在动态更新页面的情况下，用户无法回到前一页的页面状态，因为浏览器仅能记忆历史纪录中的静态页面”
fetch方式：这种实际上对Ajax的封装，比Ajax要强
axios方式：目前使用最多的一种

案例1：使用原生ajax获取网络数据

第1步：在src/utils目录下创建request.js文件，该文件用于封装ajax请求

//method:请求方式。url:端口号
export function ajax(method, url) {
    //当异步任务顺利完成且返回结果值时，会调用resolve函数
    //当异步任务失败且返回失败原因(通常是一个错误对象)时，会调用reject函数
    return new Promise((resolve, reject) => {
        //创建XMLHttpRequest对象
        let xhr = new XMLHttpRequest();
        //初始化XMLHttpRequest对象
        xhr.open(method, url, true);
        //如果是get请求，则发送信息
        xhr.send();
        //设置回调函数
        xhr.onreadystatechange = function () {
            //判断状态码必须是4
            if (xhr.readyState == 4) {
                //判断响应码的是200的时候返回数据
                if (xhr.status == 200) {
                    //获取服务端发送回来的数据
                    resolve(xhr.responseText);
                } else {
                    reject("network failure");
                }
            }
        };
    });
}

第二步：在组件中引入的created函数中调用获取网络数据

import {ajax} from '@/utils/request'
export default {
    data(){
        return{
            list:[]
        }
    },
    methods:{
       async getOperas(){
            //使用async/await
            let response=await ajax('GET','https://www.fastmock.site/mock/4441a79ad5f884f83b784cf4c588bdb6/movies/getAllOperas')
            this.list=JSON.parse(response).operas;
        }
    },
     created(){
       //使用then方式获取promies成功后的数据
    //    ajax('GET','https://www.fastmock.site/mock/4441a79ad5f884f83b784cf4c588bdb6/movies/getAllOperas').then(response=>{
    //        //将返回回来的数据由JSON转成js对象
    //        let result=JSON.parse(response)
    //        console.log(result.operas);
    //        //将获取的数据赋值给data的list数据
    //        this.list=result.operas
    //    })
        this.getOperas()
    }
}

第3步：在template模板中渲染

<template>
    <div>
        <h1>获取所有的电影院信息</h1>
        <ul> 
            <li v-for="item in list" :key="item.id">{{item.name}}</li>
        </ul>
    </div>
</template>

第二个阶段：编译HTML模板并渲染到浏览器中

这个过程的主要工作可以理解为将data中数据读到内存中，在填充到template之后进行编译，这个编译的过程由 vue-template-compiler这个依赖包来完成编译的
beforeMount：将内存中编译好的HTML结构渲染到浏览器中，此时浏览器还没有当前DOM结构，不能再这个钩子函数中直接操作DOM
create vn.$el and replace "el" wth it：用内存中编译好的HTML结构，替换掉el属性指定的DOM元素
mounted：已经把内存中的HTML结构成功的渲染到了浏览器之中，此时你可以直接在这个钩子函数中caozuoDOM元素了

第三阶段：组件更新阶段

当数据变化的时候就会触发beforeUpdate(此时data数据是实时更新的，但是DOM元素里的数据始终未初始数据)
Virtual DOM re-render and patch：根据最新的数据，重新渲染组件的DOM结构
updated：已经是最新的数据，完成了组件的DOM结构的重新渲染(data数据是实时更新的，DOM元素里的数据也是实时更新的)

第四阶段：组件销毁阶段

beforeDestory：组件即将销毁，此时尚未销毁组件，组件还能正常运行，一般在这个函数会完成资源的释放操作
Teardown watchers,child components and event listeners：销毁当前组件的侦听器、子组件、事件监听
destoryed：组件已经被销毁，此组件在浏览器中的DOM已经被完全移除

案例：停止定时器操作

 created(){
    //定义一个间隔定时器，每隔1秒钟进行加1操作
    this.times=setInterval(() => {
      console.log('num',this.num);
      this.increment()
    }, 1000);
 }
 beforeDestroy(){
    console.log('---7、beforeDestroy-------------');
    //调用销毁定时器的方法
    clearInterval(this.times)
  }