关于vue常被问到的面试问题2

1 接口请求一般放在哪个生命周期里

接口请求一般放在mounted声明周期里,但是需要注意的是 当ssr服务器端渲染的时候,不支持mounted,需要挡在created声明周期里。

2 computed 和watch 有什么区别

computed 相当于一个有缓存的watcher 依赖的属性一旦发生变化就会更新视图,适用于耗性能的计算场景

watch 不具备缓存属性 更多是监测作用,监听数据的回调,需要深度监听的时候 只需要deep:true打开就可以

3 v-if 和 v-show 有什么区别

v-if不渲染dom v-show 操作的是display

4 关联3的问题 visibility和display的区别

1、占用域的空间不同。

visibility要占用域的空间,而display则不占用。

2、回应正常文档流的不同。

如果你想隐藏某元素,但在页面上保留该元素的空间的话,你应该使用visibility:hidden 。

如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display:none 。

当你决定用display:none 来隐藏一个元素时,你必须知道其它内容将填充到该元素留下的空白位置,从而改变页面的布局。

5 关联上述问题 重绘和重排

1)重排:当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。(说白了就是页面布局发生了变化)
2)重绘:是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。(说白了就是某元素的样式发生了变化)

注意:重绘不一定需要重排,重排必然会导致重绘

造成重排的原因有哪些:

1)添加、删除可见的dom

2)元素的位置改变

3)元素的尺寸改变(外边距、内边距、边框厚度、宽高等几何属性)

4)页面渲染初始化

5)浏览器窗口尺寸改变

造成重绘的原因有哪些:
改变字体大小 颜色 伪类操作 等等

6 keep-alive

用来实现组件缓存的,当切换组件的时候不会对当前的组件进行卸载

常用的属性有include exclude 允许组件有条件的缓存

activated deactivated 两个生命周期 判断组件是否处于活跃状态

keep-alive 利用了LRU算法

7 了解LRU算法吗?

可以看这篇文章 https://blog.csdn.net/qq_26440803/article/details/83795122

8 vue 2.x 组件之间的通信方式有哪些

image.png

想要获取一个组件的实例 还可以给组件设置ref = ‘name’ 通过this.$refs.name调用

provide inject( 没用过,官方不推荐使用)

兄弟组件通信 Vue.prototype.$bus = new Vue

vuex 状态管理器 (实现跨组件通信)

listerners

9 紧接着8的问题 什么是vuex 用过吗?怎么用的?

官网地址 https://vuex.vuejs.org/zh/

image.png

安装


image.png

使用


image.png
image.png

state 类似 vue data 存放数据的 一般在vue的computed 里面读取state里某个状态

Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

image.png

image.png
image.png

image.png

10 v-model的原理是什么

其本质是一个语法糖 可以理解为value+input 方法,可通过model 属性的prop、event 属性来进行自定义

11 vue 的事件绑定原理是什么

其自定义的$on实现,此处应该类比一下原生,原生是通过addEventListener绑定给真是元素实现的

12 vue 的模板编译原理是什么?

说白了就是template 转成render函数的过程,该过程如下:

1)解析模板,生成ast语法树(一种用js对象的形式来描述的整个模板),使用大量的正则表达式对模板进行解析。

遇到标签和文本,会执行对应的钩子进行处理

2)由于vue是响应式的数据,但实际上模板中的数据不是全部都是响应式的,所以需要优化,去深度遍历AST树,根据条件对树节点进行标记,这些被标记过的就可以跳过对它们的比对。

最后就是将优化后的AST转换为可执行的代码。

总结来说就是 生成AST 优化 编译

13 template渲染 和 render渲染有什么区别,哪一个更好,为什么?

这个问题首先要弄清楚这俩是啥东西吧。

说白了就是一个是模板渲染 一个是函数渲染 当然 render 函数 跟 template 一样都是创建 html 模板

区别:

Template适合逻辑简单,render适合复杂逻辑。

使用者template理解起来相对容易,但灵活性不足;自定义render函数灵活性高,但对使用者要求较高。

render的性能较高,template性能较低。这一点我们可以看一下,下图中vue组件渲染的流程图可知。

基于上一点,我们通过vue组件渲染流程图知道,使用render函数渲染没有编译过程,相当于使用者直接将代码给程序。所以,使用它对使用者要求高,且易出现错误

Render 函数的优先级要比template的级别要高,但是要注意的是Mustache(双花括号)语法就不能再次使用

最好的列子就是两个ui框架 element-ui 和 iview,当你需要实现表单的时候,element-ui重写表格列使用的template 而 iview 使用的render函数

14 如何创建render函数

Vue中的Render函数中有一个参数,这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中

createElement这个函数中有3个参数

第一个参数(必要参数):主要用于提供DOM的html内容,类型可以是字符串、对象或函数

第二个参数(类型是对象,可选):用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类

第三个参数(类型是数组,数组元素类型是VNode,可选):主要是指该结点下还有其他结点,用于设置分发的内容,包括新增的其他组件。注意,组件树中的所有VNode必须是唯一的

15 vue 的性能优化

v-if v-for 不连用
防抖节流
key保证唯一性
使用路由懒加载、异步加载组件
第三方模块加入
业务插件化
图片懒加载、数据懒加载
seo引擎优化
打包优化
压缩代码
压缩图片
......
有机会再补充.....

你可能感兴趣的:(关于vue常被问到的面试问题2)