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

目录

1.什么是生命周期

2.生命周期函数

3.vue2中生命周期的函数

4.生命周期的阶段

5.生命周期图示

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

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

第三阶段：组件更新阶段

第四阶段：组件销毁阶段

1.什么是生命周期

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

2.生命周期函数

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

3.vue2中生命周期的函数

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

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);  //undefinedconsole.log('methods',this.fn); //undefinedconsole.log('props',this.ptitle);//undefinedconsole.groupEnd()},created(){console.group('----2、created--------');console.log('data',this.num);//可以访问数据为0console.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 () {//判断状态码必须是4if (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/awaitlet 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模板中渲染

第二个阶段：编译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)}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！