👩‍💻个人简介

🐰个人主页：地球小小🙋‍♀️
🍎博客领域：前端💡面经💡读书生活💡
🍔写作风格：干货,干货,干货
🚀支持作者：点赞👍、收藏⭐、留言💬

快手一面面试题

1让红色方块隐藏的几种方式
2 background-color与盒模型关系
3 v-if 为什么会让图形隐藏
4 手写深拷贝
5 vue生命周期
6 symbol是啥，怎么用
7 箭头函数和普通函数有什么差别
8 vue数据代理

1让红色方块隐藏的几种方式

隐藏：样式树上隐藏了

重排与重绘

重排：某部分变化，影响了布局，需要重新渲染。

reflow会从根部开始递归得向下，计算每个节点的几何尺寸和位置

重绘：改变了元素的背景颜色，边框颜色，就重新绘制一部分，不用重头计算

浏览器渲染

1 深度遍历生成DOM树，根节点document对象，async文档执行完再触发load事件

2 DOM树并行，生成CSS Object Model Tree CSSOM

3 DOM Tree+ CSSOM Tree=Render Tree(用于显示的树)，display none不会出现在render树中

4 布局以浏览器可视区为画布（0,0）从左到右，从上到下render树上布局

5 绘制 UI后端组件遍历render树，paint绘制

不占布局消失了不在文档流中占位，浏览器不解析

display:none

占布局(还在，不过不显示了) 视觉上消失了

性能好，切换显示时不会重排只是重绘

visibility：hidden
opacity:0;

visibility属性：hidden visible collapse inherit

2 background-color与盒模型关系

background-color与是哪种盒模型无关：background就是从padding +content

background-clip：border-box|padding-box|content-box|text

3 v-if 为什么会让图形隐藏

v-if: DOM树上不存在

v-show ：render树上不存在 display:none

v-if 是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点

v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

控制可见不可见的属性是什么

4 手写深拷贝

https://blog.csdn.net/cc18868876837/article/details/114918262

5 vue生命周期

1.beforeCreate(){}

创建前，访问不到data当中的属性以及methods当中的属性和方法，可以在当前生命周期创建一个loading，在页面加载完成之后将loading移除

2.created(){}

创建后，当前生命周期执行的时候会遍历data中所有的属性，给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性

当前生命周期执行的时候会遍历data&&methods身上所有的属性和方法,将这些属性和方法代理到vue的实例身上

在当前生命周期中我们可以进行前后端数据的交互(ajax请求)

----拓展 axios与jquery的ajax有什么不同

axios的优点：
1、从nodejs中创建http请求
2、支持promiseAPI
3、提供了一些并发请求的接口
4、自动转换json数据
5、客户端支持防止CSRF/XSRF
ajax的缺点：
1、jQuery项目庞大，单纯的使用ajax却要引入整个Jquery非常不合理
2、基于原生的XHR开发，但是XHR架构并不清晰

2-3编译模板，保存在内存中

3 beforeMount(){}

模板与数据进行结合，但是还没有挂载到页面上。因此我们可以在当前生命周期中进行数据最后的修改

3-4 模板挂载到页面上

4.mounted(){}

当前生命周期数据和模板进行相结合，并且已经挂载到页面上了，因此我们可以在当前生命周期中获取到真实的DOM元素

如何获取DOM元素

1、给元素添加一个ref属性值必须是唯一的

2、使用：this.$refs.属性

　　还可以在当前生命周期中做方法的实例化

beforeUpdate(){}

当数据发生改变的时候当前生命周期就会执行，因此我们可以通过当前生命周期来检测数据的变化

当前生命周期执行的时候会将更新的数据与模板进行相结合，但是并没有挂载到页面上，因此我们可以在当前生命周期中做更新数据的最后修改

6.updated(){}

数据与模板进行相结合，并且将更新后的数据挂载到了页面上。因此我们可以在当前生命周期中获取到最新的DOM结构

注意：

在当前生命周期中如果做实例化操作的时候切记要做条件判断

beforeDestroy(){}

当前生命周期中我们需要做事件的解绑监听的移除定时器的清除等操作

destroyed(){}

当前生命周期执行完毕后会将vue与页面之间的关联进行断开

当包裹动态组件的时候会触发两个新的生命周期

—什么是动态组件呢？

让多个组件使用同一个挂载点，并动态进行切换。这就是动态组件

通过保留元素,绑定is特性进行动态切换可以实现动态组件

—包裹动态组件(组件)时，会缓存不活动的组件实例,而不是销毁它们组件切换调用的时候本身会被销毁掉的，

只要加上keep-alive进行包裹，就不会被销毁，而是被缓存起来,下一次使用的时候直接从缓存中调用是一个抽象组件：

它自身不会渲染一个 DOM 元素

—keep-alive身上有几个常用的属性include，exclude，max

include : 类型：字符串或者正则表达式解释：只有名称匹配的组件会被缓存

exclude : 类型：字符串或者正则表达式解释：任何名称匹配的组件都不会被缓存

max : 类型:数字　　　　　　　　解释：最多可以缓存多少组件实例

组件一旦被缓存，那么**再次渲染**的时候就不会执行 `created`、`mounted` 等钩子函数，但是我们很多业务场景都是希望在我们被缓存的组件再次被渲染的时候做一些事情，好在`Vue` 提供了 `activated`和`deactivated` 两个钩子函数，它的执行时机是包裹的组件激活时调用和停用时调用