2020/9/22笔试，面试中遇到的一些问题。

2020/9/22

1.react vue jquery三者区别

jquery和框架的区别
框架：数据和视图分离，以数据驱动视图，只关心数据变化，dom操作被封装。数据驱动
jquery：依靠dom操作去组合业务逻辑。事件驱动

React和Vue的区别
两者的区别

• Vue—本质是MVVM框架，由MVC发展而来

• React—本质是前端组件化框架，由后端组件化发展而来
  模板的区别

• Vue—使用模板（最初由Angular提出）

• React—使用JSX

• 模板语法上，更倾向于JSX

• 模板分离上，更倾向于Vue（React模板与JS混在一起，未分离）
  组件化的区别

  1.React本身就是组件化，没有组件化就不是React
  2.Vue也支持组件化，不过是在MVVM上的扩展
  3.对于组件化，更倾向于React，做得彻底而清新
  两者共同点
  1.都支持组件化
  2.都是数据驱动视图

---

2.设置元素剧中的方式

1. 已知盒子宽度的情况用margin

.wrap{width:200px;
     height:200px;
     border:1px solid red;
     margin:0 auto;} //宽度必须给值
<div class="wrap"></div>

2. 不定宽块元素水平居中，改变为行内元素,然后使用text-align:center处理,多用于不定项导航的ul的居中

.nav{text-align:center;}
.nav ul{display:inline;}
<div class="nav">
    <ul>
        <li>1111111</li>
        <li>2222222</li>
    </ul>
</div>

3. 父元素浮动left：50%;
   同时要设置position:relative（给子元素相对定位一个参考）
   子元素相对定位position：relative；left：-50%；

.wrap{position:relative;
     left:50%;
     float:left;}
.box{position:relative; 
     left:-50%;}
<div class="wrap">
    <div class="box">一个子级盒子</div>
<div>

4. flex布局

.wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

5. position和margin

.wrap{
    width: 200px;
    height: 200px;
    background-color: lightskyblue;
    position: relative;
     }
.box{
    width: 100px;
    height: 100px;
    background-color: hotpink;
        position: absolute;
    left:50%;
    margin-left: -50px;         
    }

<div class="wrap">
      <div class="box">一个子级盒子</div>
</div>

3.watch和computed的区别

computed

计算结果并返回，只有当被计算的值发生改变时才会触发 (即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算)

支持缓存，只有依赖数据发生变化，才会重新进行计算。不支持异步，当computed内有异步操作时无效，无法监听数据的变化。computed属性会默认走缓存，计算属性是基于他们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到。如果一个属性是由其它的计算属性而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

watch

监听某一个值，当被监听的值发生变化时，执行对应的操作
(与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果)

不支持缓存，数据变化，直接会触发相应的操作；watch支持异步；监听的函数接受两个参数，第一个参数是新值，第二个是旧值，当一个属性发生变化时，需要执行对应的操作；一对多

注意： 不要在computed和watch中修改被依赖(或者被监听)的值，这样可能会导致无限循环

---

4.vue循环绑定key的作用
vue官方文档：

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
上面是vue官网的原文，简单的解释就是，key给每一个元素提供了唯一的类似id的属性，依靠这个key可以更快速更准确的对比新旧虚拟DOM，提高性能。但是，不带key，渲染简单的数据，反而会更快。
看一个例子：
不带key：

带key：

很容易看出，带key的列表在新增的时候，我选中了第一个，新增之后选中的还是第一个，也就是说新增的是就地复用，而带key的是直接新增节点。
在这个过程，diff算法应该是判断新旧树是否相同，相同就复用，不相同就删除旧的创建新的。带key的当然是每次新增都找不到可复用节点，要删除和创建，对性能影响更大。而不带key时节点的就地复用，省去了删除和创建的开销，只需要修改内容，所以刻意默认行为以获取性能上的提升。
两个图也应该很明显的表现出不带key会带来一些隐藏的副作用，比如上图的状态错位。其实在我看来，带key和不带key虽然有性能上的争议，但是对于用户来说基本没什么区别，为了消除一些异常，建议还是带上key。
最后总结一下，key对于diff算法的性能有影响，针对简单的渲染，不带key性能更好，针对复杂的渲染带key性能更好。至于这个复杂渲染的程度，暂时也是不知。而不带key会有一些隐藏的副作用，所以建议带上唯一的key。

---

5.数组去重

//ES6
var list = [4, 4, "lalala", "lalala", true, true, undefined, 'true', 'true', undefined, undefined, null, null, 0, 0, {}, {}, [], [], NaN, NaN]
function unique(arr) {
    return Array.from(new Set(arr))
}
console.log(unique(list))

// [4, "lalala", true, undefined, "true", null, 0, {}, {}, [], [], NaN]
// 0.0029296875ms

简化一下
[...new Set(list)]

6.cookie localStorage sessionStroage区别
7.简述vue的生命周期，以及组件之间的传参方式
8.JS中阻止冒泡和阻止默认行为的方式

1. 阻止事件冒泡：event.stopPropagation();
2. 阻止默认行为：event.preventDefault();

7.学习的过程中遇到了哪些问题

8.学习的方式
9.职业规划
10.我对于公司有什么问题要问