Vue——生命周期函数、面试/笔试题

目录

 一、生命周期函数(面试)

1、beforeCreate：创建前

2、 created ：创建完成

3、beforeMount：挂载前

4、 mounted：挂载完成

5、beforeUpdate：更新前

6、 updated ：更新完成

 7、beforeDestroy ：销毁前

8、destroyed：销毁完成

二、面试/笔试题

1）计算属性、属性侦听器、方法、过滤器有什么区别？哪些是被this对象劫持过的？

1、计算属性：

2、方法：

3、过滤器：

4、属性侦听器：

2）计算属性、属性侦听器、方法、过滤器，data哪些是被this对象劫持过的？

3）为什么要把这些函数（计算属性、属性侦听器、方法、过滤器）分开设计：

4）、什么是生命周期函数？

5）、Vue的生命周期函数有哪些？

6）、为什么设计生命周期函数？

7）、页面首次加载过程，会一次触发哪些钩子

8）、this.$el是什么？它在哪些钩子中才能访问？

9）、Vue实例的data属性，在哪些钩子中能访问

10）、为什么不要在更新钩子中做页面的数据请求？

11）、你用brforeCreate做过什么业务？

12）、为什么要用生命周期函数?

14）、你用销毁钩子做过什么?

15）、 Vue 实例的 data 属性，可以在哪些生命周期中获取到？

16）、关于 Vue 的生命周期，下列哪项是不正确的？

17）、VM和DOM之间的关系？

18）、讲一讲DIFF算法?

---

 一、生命周期函数(面试)

vm对象的生命周期函数(钩子函数,生命钩子)
相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数

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

在某一种条件成立的时候，系统会去调用Vue中设定的函数，这些函数叫做：生命周期函数

 虚拟节点有两种方式：关联模板、挂载模板

当前cm对象在创建到销毁的过程中，回去调用的函数：

beforeCreate、 created 、beforeMount、 mounted 、beforeUpdate、 updated、 beforeDestroy 、destroyed

1、beforeCreate：创建前

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

能否做网络请求？

能做网络请求（只是在这个函数中的网络请求一般不是做页面渲染，是用于预加载），因为这是函数在运行时XMLHttpRequest是可以房屋内并且去做AJAX请求的

能够网络请求数据，然后设置到数据源中？

不能设置到数据源中，因为这个钩子中this还在创建

这个在项目中干什么？

预加载：网页中同源加载的优化（同一个页面中img、script等等，src属性去请求资源）

只要不是用于页面渲染的网络请求都可以

2、 created ：创建完成

vm对象以及创建完毕了，但是它（vm）还没有挂载到DOM树中

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

能否做网络请求？

能做网络请求，因为这是函数在运行时XMLHttpRequest是可以房屋内并且去做AJAX请求的

能够网络请求数据，然后设置到数据源中？

可以设置到数据源中，因为这个钩子中this已经创建完毕了

这个在项目中干什么？

请求首屏数据

以下的所有函数都可以  网络请求数据，然后设置到数据源中，因为这个钩子中this已经创建完毕

3、beforeMount：挂载前

渲染前的操作

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

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

4、 mounted：挂载完成

vm已经挂载到页面了

请求首屏数据，请求时页面已经出来了

5、beforeUpdate：更新前

数据源已经更新了，页面重新渲染前（不是数据更新前）触发的钩子

beforeUpdate 、updated这两个钩子中，不能网络请求新数据，去更新数据源

因为会导致死循环

6、 updated ：更新完成

页面已经重新渲染了 触发的钩子

 7、beforeDestroy ：销毁前

vm对象销毁之前触发的钩子，this还在，可以做最后的操作

保存用户的行为配置文件（比如播放器的进度，将当前的时间进行缓存，或者发给后台）

8、destroyed：销毁完成

后面再webpack环境下操作

往往把当前组件中计时器清除了，可以把body的滚动条滚动到顶部

beforeCreate created beforeMount mounted destory/x这些钩子都只执行一次
beforeUpdate updated第一次构建不会调用,以后每次data被更新了就会调用
beforeDestroy destroyed 销毁的方式有两种:用户关闭和代码this.$destroy()//销毁vm实例

this.$el是指的关联的那个div，是要在mounted之后才有

   //vm实例创建中
				//1.data都还没有构建出来数据
				//2.方法也还没有构建出来
				beforeCreate() {
					console.log("vm实例创建中")
					// console.log(this.msg)//这时候data都还没有构建出来数据
					// this.fn()
				},

				//vm实例创建完毕
				//data 方法 等等工具已经构建完毕
				//但是vm还没有挂载到界面上去,可以在这个钩子中做页面第一次加载时的网络请求
				created() {
					console.log("vm实例创建完毕")
					// console.log(this.msg)
					// this.fn()
				},

				//挂载到DOM之前
				//data等vm对象的工具构建完毕 正在挂载到DOM中
				beforeMount() {
					console.log("挂载到DOM之前")
				},

				//挂载到DOM上了
				//有点像window.onload
				//这里也可以做网络请求,页面加载了之后的所有业务,都可以在这里
				//这个函数执行标志着 vm和dom成功关联==>随意操作vm来间接的操作dom
				mounted() {
					console.log("挂载到DOM上了")
				},

				//更新数据之前
				beforeUpdate() {
					alert("更新数据之前")
                  debugger//卡住页面
				},

				//更新数据完毕
				//data.xx=100
				//xxx.innerHTML=data.xx
				//更新的是data,这时候还没有刷新UI,它会找一个合适的时机去刷新UI
				//这个钩子调用之后才会刷新UI
				updated() {
					alert("更新数据完毕")
				},
				

				//销毁实例之前
				//常常去把一些运行着的代码停下来
				//本地或者网络请求来记录用户的配置信息或者偏好设置
				beforeDestroy() {
					console.log("销毁实例之前",this.msg)
					
				},

				//实例销毁了
				//钩子调用后 才销毁  做最后的挽救
				//从技术的角度来说  可以在这个方法打开其他程序,然后销毁这个程序
				destroyed() {
					console.log("实例销毁了",this.msg)
				}

二、面试/笔试题

1）计算属性、属性侦听器、方法、过滤器有什么区别？哪些是被this对象劫持过的？

1、计算属性：

会把计算的结果缓存起来，并监听计算过的数据源，如果监听的数据源发生变化，才会重新计算（就算设置为一样的也不会重新就算），没有监听的属性发生变化，模板会重新渲染

2、方法：

一般是提高给模板时间和其它方法（比如：钩子函数）使用，如果在模板中使用了方法，而且不是事件，如果模板中的渲染的任意数据源改变了，它都会重新调用

3、过滤器：

往往用于数据渲染前的数据处理，除了用法跟方法不一样，其它都一样，它没有被劫持

4、属性侦听器：

只有侦听的属性发生变化才会触发（可以深度侦听，但是更消耗内存）

2）计算属性、属性侦听器、方法、过滤器，data哪些是被this对象劫持过的？

过滤器、属性侦听器 没有被this对象劫持

其余都被this劫持了

3）为什么要把这些函数（计算属性、属性侦听器、方法、过滤器）分开设计：

为了业务更明显，功能更好调用

4）、什么是生命周期函数？

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

5）、Vue的生命周期函数有哪些？

普遍的答法:

            有8个创建前后,挂载前后,更新前后,销毁前后

高级的答法:

            组件的有8个(创建前后,挂载前后,更新前后,销毁前后)

            自定义指令也有5个

            动态组件有2个 

            路由(组件有3个,全局有2个,独享有1个)  

6）、为什么设计生命周期函数？

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

7）、页面首次加载过程，会一次触发哪些钩子

beforeCreate，created，beforeMount，mounted

8）、this.$el是什么？它在哪些钩子中才能访问？

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

this.$el是指的关联的那个div

9）、Vue实例的data属性，在哪些钩子中能访问

created，beforeMount，mounted，beforeUpdate，updated，beoreDestroy

10）、为什么不要在更新钩子中做页面的数据请求？

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

11）、你用brforeCreate做过什么业务？

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

12）、为什么要用生命周期函数?

0.把整个运行期间的业务区分的很明显
1.能够更好的帮助我们把产品的业务逻辑实现了
2.更有利于我们维护产品 和 修改需求
3.能够让我们写出更高质量的产品的代码      

 13）、网络请求应该在什么钩子中,为什么?

可以放在data生成以后更新数据之前 的所有钩子中
具体的更具业务需求来  常见的放在created或者mounted中
​                
因为网络请求下来的数据 常常会存在data容器中
created:因为有时候我们希望异步的网络请求和vm的挂载同时进行 体现出CPU多核的优势
mounted:因为有时候我们希望本地的UI骨架已经加载完毕以后再去请求数据刷新UI

14）、你用销毁钩子做过什么?

常常去把一些运行着的代码停下来
本地或者网络请求来记录用户的配置信息或者偏好设置

15）、 Vue 实例的 data 属性，可以在哪些生命周期中获取到？

A. beforeCreate
B. created
C. beforeMount
D. mounted

选BCD

16）、关于 Vue 的生命周期，下列哪项是不正确的？

A. DOM 渲染在 mounted 中就已经完成了
B. Vue 实例从创建到销毁的过程，就是生命周期
C. created 表示完成数据观测、属性和方法的运算和初始化事件，此时 $el 属性还未显示出来
D. 页面首次加载过程中，会依次触发 beforeCreate，created，beforeMount，mounted，beforeUpdate，updated

选D，beforeUpdate，updated不会触发

17）、VM和DOM之间的关系？

1.VM是JS模拟出来的跟DOM结构很像的一种对象结构VNode.  它通过底层的render函数

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

18）、讲一讲DIFF算法?