56、说一下 v-if与v-show的区别

1、手段

  • v-if 是动态的向 DOM 树内增加或许删除 DOM 元素
  • v-show 是经过设置 DOM 元素的 display 款式特点控制显隐

2、编译进程

  • v-if 切换有一个局部编译/卸载的进程，切换进程中适宜地毁掉和重建内部的事件监听和子组件
  • v-show 仅仅简略的依据 css 切换

3、编译条件

  • v-if 是惰性的，假如初始条件为假，则什么也不做。只要在条件第一次变为真时才开端局部编译
  • v-show 是在任何条件下(首次条件是否为真)都被编译，然后被缓存，而且 DOM 元素保存

4、性能消耗

  • v-if 有更高的切换消耗
  • v-show 有更高的初始渲染消耗

5、运用场景

  • v-if 合适运营条件不大可能改变
  • v-show 合适频频切换

57、 怎么让CSS值在当时的组件中起作用

在 vue 文件中的 style 标签上，有一个特别的特点：scoped。当一个 style 标签具有 scoped 特点时，它的 CSS 款式就只能作用于当时的组件，也便是说，该款式只能适用于当时组件元素。经过该特点，可以使得组件之间的款式不相互污染。假如一个项目中的一切 style 标签悉数加上了 scoped，相当于完成了款式的模块化。

scoped 的完成原理

vue 中的 scoped 特点的作用首要经过 PostCSS 转译完成的。PostCSS 给一个组件中的一切 DOM 增加了一个绝无仅有的动态特点，然后，给 CSS 挑选器额定增加一个对应的特点挑选器来挑选该组件中 DOM，这种做法使得款式只作用于含有该特点的 DOM，即组件内部 DOM。

例如：

转译前

<template>
  <div class="example">hi</div>
</template>
<style scoped>
.example {
  color: red;
}
</style>

转译后：

<template>
  <div class="example" data-v-5558831a>hi</div>
</template>
<style>
.example[data-v-5558831a] {
  color: red;
}
</style>

58、 0.1 + 0.2 === 0.3 嘛？为什么？

易忘，但常问的面试题（九）

运算时发生了什么？

首要，计算机无法直接对十进制的数字进行运算，这是硬件物理特性现已决议的。这样运算就分成了两个部分：先依照IEEE 754转成相应的二进制，然后对阶运算.

1.进制转化

0.1和0.2转化成二进制后会无限循环

0.1 -> 0.0001100110011001...(无限循环)
0.2 -> 0.0011001100110011...(无限循环)

IEEE 754标准，经过64位来表明一个数字，会将剩余的位数截取掉（进制之间的转化中精度现已损失）

易忘，但常问的面试题（九）

  • 第0位：符号位，0表明正数，1表明负数(s)
  • 第1位到第11位：贮存指数部分（e）
  • 第12位到第63位：贮存小数部分（即有用数字）f

2.对阶运算

对两个二进制数做加法

  0 01111111100  0.1100110011001100110011001100110011001100110011001101
+ 0 01111111100  1.1001100110011001100110011001100110011001100110011010
= 0 01111111100  10.0110011001100110011001100110011001100110011001100111

对阶后发现，最终一个1放不下了，需求放弃，依据标准当要放弃一位数时，需求进行0舍1入。假如被放弃的是0什么都不用做，假如被放弃的是1，则需求补回来。

0 01111111101 0011001100110011001100110011001100110011001100110011 1（1 多出，需求放弃）
0 01111111101 0011001100110011001100110011001100110011001100110100  （补 1）

形成不一样的原因：浮点数运算进程中的误差问题。

小数在计算机的存储进程中自身就存在精度丢掉的问题，然后尾数的位数一共只要52位，放不下时会被丢掉，并依照舍0补1来弥补导致最终运算成果不相等。

59、 new 一个函数发生了什么

经过new去调用一个函数时，这个函数便是一个结构函数

  1. 在内存中创立一个新的空目标；
  2. 结构函数的 prototype 的值会被赋给第 1 步创立的目标的 [[Prototype]] 特点；
  3. 结构函数内部的 this，也会指向第 1 步创立的目标；
  4. 履行函数的内部代码（函数体）；
  5. 假如结构函数没有回来非空目标，则回来第 1 步创立的目标（其实也便是 this）。

以下是运用new关键字创立目标的基本原理

  1. 创立一个空目标：首要，JavaScript 会创立一个空目标，这个目标将成为新创立目标的实例。

  2. 履行结构函数：接下来，JavaScript 会调用传递给new关键字的函数，并将新创立的空目标作为this参数传递给该函数。这个函数一般被称为结构函数。

  3. 设置原型：在结构函数内部，可认为新目标设置特点和办法。结构函数的回来值一般是被疏忽的，但假如结构函数回来一个目标，那么这个目标将被用作新创立目标的原型。

  4. 原型链：新创立的目标具有一个指向结构函数的原型目标的内部链接，这个链接被称为原型链。经过原型链，新目标可以拜访从原型目标继承的特点和办法。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 为原型目标增加办法
Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
}
var person1 = new Person('John', 30);
person1.sayHello();

60、 你知道 301、302 状况码是什么嘛？

301 状况码

301 Moved Permanently，永久性重定向。当服务器收到恳求后，会告诉浏览器，此资源被分配到了一个新的URL下，此刻的浏览器会主动将恳求重定向到新的URL下，以后一切的恳求都会去恳求新的URL。

包含了第一次恳求与第2次恳求的状况

  1. 第一次拜访原始URL，浏览器向服务器发送恳求。
  2. 服务器响应恳求，将301状况码与 最新的资源地址(位于响应头里的location字段) 回来给浏览器。
  3. 浏览器收到301状况码后，向最新的地址发送恳求，此刻浏览器地址栏里的地址也将变为最新的资源地址。
  4. 浏览器将最新的资源缓存到本地。
  5. 当以后再拜访老的URL时，浏览器就不去恳求老的URL，而是去恳求新的URL。

例如：

// 老路由
router.get('/301oldLogin', function(req, res, next) {
    // 301永久重定向
    res.redirect(301, '/login/301newLogin');
});
// 新路由
router.get('/301newLogin', function(req, res, next) {
    res.send(`
      <!DOCTYPE html>
      <html>
          <head>
          <meta charset="utf-8" />
          <title>301拜访新登录页</title>
          <style>
            * {
                margin: 0;
                padding: 0;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            div {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
          </style>
          </head>
          <body>
          <div>欢迎登陆新的页面-301</div>
          </body>
      </html>
    `);
});

第一次拜访老路由(浏览器里输入：http://localhost:3000/login/301oldLogin)，此刻的页面状况如下：

易忘，但常问的面试题（九）

第2次拜访老路由

易忘，但常问的面试题（九）

  • 第一次拜访老url，先恳求老的url的资源，再去恳求新的url的资源，此刻地址栏里的地址将会主动变为新的url。
  • 浏览器将最新的资源地址 与 资源内容缓存到本地。
  • 当再次拜访老的url的时分，浏览器直接去恳求新的资源地址。

302 状况码

302 Found（临时重定向）。表明资源临时被移动到新的url。浏览器在遇到这个状况码后，同样会将地址栏里的老url替换为新的url，但后续恳求仍旧会去恳求老的url。

  • 浏览器拜访老的url，服务端回来302状况码 以及 最新的资源地址。
  • 浏览器得到302状况码，将地址栏变为最新的资源地址，然后去拜访最新的地址。
  • 当浏览器再次拜访老的url，开端重复第一步。

包含了第一次恳求和第2次恳求的状况

例如：


router.get('/302oldLogin', function(req, res, next) {
    res.redirect(302, '/login/302newLogin');
});
router.get('/302newLogin', function(req, res, next) {
    res.send(`
      <!DOCTYPE html>
      <html>
          <head>
          <meta charset="utf-8" />
          <title>302拜访新登录页</title>
          <style>
            * {
                margin: 0;
                padding: 0;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            div {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
          </style>
          </head>
          <body>
          <div>欢迎登陆新的页面-302</div>
          </body>
      </html>
    `);
});

第一次恳求老路由，地址栏输入:http://localhost:3000/login/302oldLogin，页面状况如下：

易忘，但常问的面试题（九）

第2次恳求老路由也是一样的成果.