生命周期函数

钩子函数:生命周期函数 (c语言中有一类系统回调的函数然后执行业务叫做钩子)

生命周期函数:在某一种条件成立的时刻,系统会去调用的vue中设定的函数,这些函数都叫做:生命周期函数

当前vm(new Vue)实例在创建到销毁的过程中,会去调用的函数

beforeCreate()

created()

beforeMount()

mounted()

beforeUpdate()

updated()

beforeDestroy()

destroyed()

1.beforeCreate() 这个函数在运行时，vm正在创建中

1.能否网络请求:能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的

2.能否网络请求数据然后设置到数据源中:不能设置到数据源中,因为这个钩子中 this还在创建

3.这个在项目中干什么：只要不是用于页面渲染，可预加载图片，预加载工具

4.：这个函数在运行时 vm正在创建中:劫持data,methods 也就是 this对象中还不能访问到数据

				beforeCreate(){
					//能否网络请求?
					//能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的
					
					//能否网络请求数据 然后设置到数据源中?
					//不能设置到数据源中,因为这个钩子中 this还在创建
										
					//这个在项目中干什么?
					//只要不是用于页面渲染
					//预加载图片: 网页中同源加载的优化(同一个页面中img script等等 src属性去请求资源)
					new Image().src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1662397200&t=873657ddc05e966309998f18814a9e54"
					//预加载工具
					//第三方工具的加载
					
					//这个函数在运行时 vm正在创建中:劫持data,methods 也就是 this对象中还不能访问到数据
					console.log("beforeCreate",this.msg,this.change1,this)										
				},

2.created() vm对象已经创建完毕了,但是它(vm)还没有挂载到DOM树中

1.能否网络请求：能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的

2.能否网络请求数据然后设置到数据源中：可以设置到数据源中,因为这个钩子中 this已经创建完毕了

3.这个在项目中干什么:请求首屏数据

4.:vm对象已经创建完毕了,但是它(vm)还没有挂载到DOM树中

5.:这个函数可以操作this对象了但是无法操作DOM

created(){
					//能否网络请求?
					//能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的
					//能否网络请求数据 然后设置到数据源中?
					//可以设置到数据源中,因为这个钩子中 this已经创建完毕了
					//这个在项目中干什么?
					//请求首屏数据
					
					//vm对象已经创建完毕了,但是它(vm)还没有挂载到DOM树中
					//这个函数可以操作this对象了  但是无法操作DOM
					console.log("created",this.msg,this.change1)					
				},

3.beforeMount() 渲染前的操作(vm对象已经创建完毕了,在挂载之前触发的钩子)

1.:vm对象已经创建完毕了,在挂载之前触发的钩子

2.:这个函数可以操作this对象了但是无法操作DOM

				beforeMount(){
					//渲染前的操作
					//vm对象已经创建完毕了,在挂载之前触发的钩子
					//这个函数可以操作this对象了  但是无法操作DOM
					console.log("beforeMount")
				},

4.mounted() vm已经挂载到页面了

1.这个在项目中干什么:请求首屏数据,请求时页面已经出来了

2.:vm已经挂载到页面了

mounted(){
					//vm已经挂载到页面了
					//请求首屏数据,请求时页面已经出来了					
					console.log("mounted")
				},

5.beforeUpdate() 数据源已经更新了,页面重新渲染前(并不是数据更新前) 触发的钩子

1.能否网络请求:不能网络请求新数据去更新数据源,会进入死循环

2.:数据源已经更新了,页面重新渲染前(并不是数据更新前) 触发

				beforeUpdate(){
					//这两个钩子中 不能网络请求新数据 去更新数据源
					//会导致死循环
					
					//数据源已经更新了,页面重新渲染前(并不是数据更新前) 触发的钩子
					console.log("beforeUpdate",this.url)
				},

6.updated() 页面已经重新渲染了触发的钩子

1.能否网络请求:不能网络请求新数据去更新数据源,会进入死循环

2.:页面已经重新渲染了触发

				updated(){
					//页面已经重新渲染了触发的钩子
					console.log("updated")
				},

7.beforeDestroy() vm对象销毁之前触发的钩子

1.能否网络请求数据然后设置到数据源中:this还在,可以做最后的操作. 2.作用:保存用户的行为配置文件:播放器的进度等等 3.:vm对象销毁之前触发

				beforeDestroy(){
					
					//vm对象销毁之前触发的钩子,this还在  可以做最后的操作
					//保存用户的行为配置文件:播放器的进度 等等
					console.log("beforeDestroy",this.msg)
				},

8.destroyed() vm对象销毁之后

1.能否网络请求数据然后设置到数据源中:能网络请求,在webpack环境下操作,无法操作this 2.作用:往往把当前组件中计时器清除了,可以把body的滚动条滚到顶部

				destroyed(){
					//后面在webpack环境下操作 无法操作this
					//往往把当前组件中计时器清除了  可以把body的滚动条滚到顶部
					console.log("destroyed",this.msg)
				}

面试题

1.什么是生命周期函数?

vue组件对象在创建到销毁的过程中,在某一种条件成立的时刻,系统会去调用的vue中设定的函数,这些函数都叫做:生命周期函数

2.vue的命周期函数有哪些?

普遍的答法:有8个创建前后,挂载前后,更新前后,销毁前后

高级的答法:组件的有8个(创建前后,挂载前后,更新前后,销毁前后),自定义指令也有5个,动态组件有2个,路由(组件有3个,全局有2个,独享有1个)

3.为什么设计生命周期函数?

为了更好的设计程序,让代码更有逻辑和可维护性

0.把整个运行期间的业务区分的很明显

1.能够更好的帮助我们把产品的业务逻辑实现了

2.更有利于我们维护产品和修改需求

3.能够让我们写出更高质量的产品的代码

4.页面首次加载过程中，会依次触发哪些钩子

beforeCreate，created，beforeMount，mounted

5.this.$el 是什么?它在哪些钩子中才能访问?

它代表了当前组件的真实DOM,要在mounted之后才有

6. Vue 实例的 data 属性，在哪些钩子中能访问

created beforeMount mounted beforeUpdate updated beforeDestroy

7.为什么不要在更新钩子中做页面的数据请求?

会导致死循环 react有一个shoudComponentUpdate可以自己控制但是vue没有

8.你用beforeCreate做过什么业务?

这个钩子中可以做网络请求但是vm没有构建完毕,此时数据方法等等的劫持还没有完成,不能操作this,因此可以做预加载.

9.VM和DOM之间的关系?

1.VM是JS模拟出来的跟DOM结构很像的一种对象结构VNode. 它通过底层的render函数渲染到页面上,让页面DOM跟虚拟VNode关联映射.

2.如果VM的数据源发生变化,会让内存中生成新的VNode 新的VNode会和旧的VNode作比较然后更新,这个过程就是DIFF算法

Vue2---(生命周期函数)