1. Vue的基本原理

graph LR
render--> |Touch| getter

 id1((data))
-->getter--> |collect-as-Deoendency |watcher  
 id1((data))
-->setter--> |Notify |watcher  
watcher  -->|Trigger re-render  |component-render-Function -->|render| dom-tree

当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
相关知识点
defineProperty

2 如何实现三角形

将盒子的宽高设置为0，再设置盒子的border属性，将四个方向的盒子都设置的比较宽，然后清除盒子的border-top，并将border的left和right都设置为透明(transparent)即可得到一个三角形

div {
   width: 0;
   height: 0;
   border: 50px solid #333;
   border-top: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
}

3.scoped原理

Scope CSS 的本质是基于 HTML 和 CSS 属性选择器，即分别给 HTML 标签和 CSS 选择器添加 data-v-xxx；

具体来说，它是 通过 vue-loader 实现 的，实现过程大致分 3 步：

首先 vue-loader 会解析 .vue 组件，提取出 template、script、style 对应的代码块；
然后构造组件实例，在组件实例的选项上绑定 ScopedId；
最后对 style 的 CSS 代码进行编译转化，应用 ScopedId 生成选择器的属性

4 原型、构造函数、实例对象三者的关系

首先从构造函数说起，构造函数通过prototype指向他的原型对象，原型对象通过他的constructor属性指回这个构造函数，表明原型对象是由哪个构造函数生成的。原型对象通过new关键字生成的实例对象，这个实例对象可以通过__proto__属性指向生成这个实例对象的构造函数的原型对象，实现一个三角关系。

5 BFC的理解

BFC 的全称是 Block Formatting Context，块级格式化上下文。这是一个用于在盒模型下布局块级盒子的独立渲染区域，将处于BFC区域内和区域外的元素进行互相隔离，互不影响。

何时会形成 BFC：满足下列条件之一就可触发BFC：
- HTML根元素
- position 值为 absolute 或 fixed
- float 值不为 none
- overflow 值不为 visible
- display 值为 inline-block 、 table-cell 或 table-caption
BFC 的应用场景
- 防止两个相邻块级元素的上下 margin 发生重叠 (上下margin合并问题)
- 清除浮动
- 实现自适应布局, 防止元素被浮动元素覆盖(左边固定, 右边自适应)

6 怎么实现右边固定，左边自适应

flex：让两个盒子平级处于同一个父盒子内，给父盒子设置display：flex，将右边的盒子宽度写死，左边的盒子设置flex：1
定位+overflow：让两个盒子平级处于同一个父盒子内，给父盒子设置position：relative，右边的子盒子设置宽高，设置position为absolute或fixed，top和right都为0，将左边的盒子设置overflow：hidden即可
float：将右边的盒子设置好宽高并设置float：right，使两个盒子在一行显示，然后给左边盒子设为margin-right，设置的值等于右边盒子的宽度即可

7 通过 CSS 的哪些方式可以实现隐藏页面上的元素？

opacity: 0；通过将元素的透明度设置为0，实现看起来隐藏的效果；但是依然会占用空间并可以进行交互
visibility: hidden ；与透明度为0的方案非常类似，会占据空间，但不可以进行交互
overflow: hidden；只会隐藏元素溢出的部分；占据空间且不可交互
display: none ；可以彻底隐藏元素并从文档流中消失，不占据空间也不能交互，且不影响布局
z-index: -9999；通过将元素的层级置于最底层，让其他元素覆盖住它，达到看起来隐藏的效果
transform: scale(0,0)；通过将元素进行缩放，缩小为0；依然会占据空间，但不可交互
left: -9999px ；通过将元素定位到屏幕外面，达到看起来看不到的效果

8 HTML 文件中的 DOCTYPE 是什么作用？

HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type，网页文件的文档类型标准。
主要作用是告诉浏览器的解析器要使用哪种 HTML规范或 XHTML规范来解析页面。 DOCTYPE 需要放置在 HTML 文件的标签之前

10月25日

1. 垂直居中DIV

1.绝对定位（盒子宽高已知）

.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}

.son {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;（-盒子一半宽度）
margin-top: -150px;（-盒子一半高度）
width: 300px;
height:300px;
background-color: blue;
}

2绝对定位（宽高已知）+margin

father {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: red;
}

.son{
    position:absolute;
    margin:auto;
    top:0; 
    left:0; 
    bottom:0;
    right:0;
    width: 300px;
    height:300px;
    background-color: blue;
}

3.定位（宽高未知）+transform

.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: blue;
}

4.grid布局（父元素设置，宽高未知）（兼容性ie 10以上支持）

.father {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 500px;
    height: 500px;
    background-color: red;
}

5.flex布局（父元素设置，宽高未知）（兼容性ie 11以上支持）

.father {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
    height: 500px;
    background-color: red;
}

6.表格布局（父元素设置，宽高未知）（兼容性较好）

.father {
    display:table-cell
    text-align: center;
    vertical-align: middle
    width: 500px;
    height: 500px;
    background-color: red;
}
.son {
    display: inline-block;
}

2 清除浮动

1、父级div定义overflow:hidden（如果父级元素有定位元素超出父级，超出部分会隐藏，）

2、在浮动元素后面加一个空标签，clear：both；height： 0；overflow：hidden

3、伪元素清除浮动：给浮动元素父级增加 .clearfix::after（content: ‘’; display: table; clear: both;）（不会新增标签，不会有其他影响，）

3 语义话的目的是什么？

用正确的标签做正确的事。

提高代码的可读性，页面内容结构化，便于开发人员的代码编写，同时提高的用户体验；有利于SEO ，便于搜索引擎爬虫爬取有效信息。

4.CSS中有哪些长度单位？

绝对长度单位：px

百分比: %

相对父元素字体大小单位: em

相对于根元素字体大小的单位: rem

相对于视口宽度的百分比（100vw即视窗宽度的100%）: vw

相对于视口高度的百分比（100vh即视窗高度的100%）: vh

5. 如果后端传过来的数据列表过多怎么处理

通过 setTimeout 进行分页渲染
在渲染页面的时候，我们可以使用requestAnimationFrame来代替setTimeout，这样可以减少reflow次数，提高性能。
文档片段
延迟加载，懒加载

虽然后端一次返回这么多数据，但用户的屏幕只能同时显示有限的数据。所以我们可以采用延迟加载的策略，根据用户的滚动位置动态渲染数据。
跟后端进行协商

6. png、jpg、gif 这些图片格式解释一下，分别什么时候用？

png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。

jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。

gif:一般是做动图的。

webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。

7 position有哪些值？分别是根据什么定位的？

static [默认]  没有定位
fixed  固定定位，相对于浏览器窗口进行定位。
relative  相对于自身定位，不脱离文档流。
absolute	相对于第一个有relative的父元素，脱离文档流。


relative和absolute区别
1. relative不脱离文档流 、absolute脱离文档流
2. relative相对于自身 、 absolute相对于第一个有relative的父元素
3. relative如果有left、right、top、bottom ==》left、top
    absolute如果有left、right、top、bottom ==》left、right、top、bottom

8 在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数 : 让文字在浏览器上表现更好看。

另外说明：ui给前端一般设计图都是偶数的，这样不管是布局也好，转换px也好，方便一点。

9 opacity 和 rgba区别

共同性：实现透明效果

opacity 取值范围0到1之间，0表示完全透明，1表示不透明
rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间

区别：继承的区别 opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。

10 CSS允许使用哪些不同的媒介类型？

@media属性主要有四种类型（包括screen）：
all—适用于所有设备。

print—打印预览模式/打印页面。

speech——适用于“朗读”页面的屏幕阅读器

screen——计算机屏幕（默认）

10月25日

1.css引入的方式有哪些，link和@import的区别是什么

区别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。
区别2：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
区别3：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
区别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

2.forEach、for in、for of三者区别

forEach更多的用来遍历数

for in 一般常用来遍历对象或json

for of数组对象都可以遍历，遍历对象需要通过和Object.keys()

for in循环出的是key，for of循环出的是value

3. 什么是Ajax和JSON，它们的优点和缺点

Ajax：

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互

Ajax优点：

异步请求响应快，用户体验好；页面无刷新、数据局部更新；按需取数据，减少了冗余请求和服务器的负担；

Ajax缺点：

异步回调问题、this指向问题、路由跳转back问题；对搜索引擎的支持比较弱，对于一些手机还不是很好的支持

JSON：

是一种轻量级的数据交换格式，看着像对象，本质是字符串

JSON优点：

轻量级、易于人的阅读和编写，便于js解析，支持复合数据类型

JSON缺点：

没有XML格式这么推广的深入人心和使用广泛, 没有XML那么通用性

4.vue , 微信小程序 , uni-app绑定变量属性

vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":"; 小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。

5.vue、uni-app、小程序的页面传参方式

1、 vue传参

   vue可以通过标签router-link跳转传参，通过path+路径，query+参数
   也可以通过事件里的this.$router.push（{}）跳转传参

2、小程序传参

  通过跳转路径后面拼接参数来进行跳转传参

3.uniapp

  通过跳转路径后面拼接参数来进行跳转传参

6.分别写出jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么？

jQuery：

    存：$.cookie('key','value')
    取：$.cookie('key')

vue：

存储：localstorage.setItem（‘key’，‘value’）
接收：localstorage.getItem（‘key’）

微信小程序：

存储：通过wx.setStorage/wx.setStorageSync写数据到缓存
接收：通过wx.getStorage/wx.getStorageSync读取本地缓存，

uni-app：

存储：uni.setStorage({key:“属性名”，data:“值”})
接收：uni.getStorage({key:“属性名”,success(e){e.data//这就是你想要取的token}})

7 uniapp进行条件编译的两种方法？小程序端和H5的代表值是什么？

通过 #ifdef、#ifndef 的方式 H5 ： H5 MP-WEIXIN ：微信小程序

面试题第十期

1. Vue的基本原理

2 如何实现三角形

3.scoped原理

4 原型、构造函数、实例对象三者的关系

5 BFC的理解

6 怎么实现右边固定，左边自适应

7 通过 CSS 的哪些方式可以实现隐藏页面上的元素？

8 HTML 文件中的 DOCTYPE 是什么作用？

10月25日

1. 垂直居中DIV

2 清除浮动

3 语义话的目的是什么？

4.CSS中有哪些长度单位？

5. 如果后端传过来的数据列表过多怎么处理

6. png、jpg、gif 这些图片格式解释一下，分别什么时候用？

7 position有哪些值？分别是根据什么定位的？

8 在网页中的应该使用奇数还是偶数的字体？为什么呢？

9 opacity 和 rgba区别

10 CSS允许使用哪些不同的媒介类型？

10月25日

1.css引入的方式有哪些，link和@import的区别是什么

2.forEach、for in、for of三者区别

3. 什么是Ajax和JSON，它们的优点和缺点

4.vue , 微信小程序 , uni-app绑定变量属性

5.vue、uni-app、小程序的页面传参方式

6.分别写出jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么？

7 uniapp进行条件编译的两种方法？小程序端和H5的代表值是什么？