面试的一个外包，以下是遇到的问题。

自我介绍掠过

大概流程如下：

javascript vue 区别 vue和js最大的区别_面试


面试题如下：

1原生js和vue的区别****

1.js首先都要获取到DOM对象，再对DOM对象进行进行值的修改等操作； 2.Vue是首先把值和js对象进行绑定，再修改js对象的值，Vue框架就会自动把DOM的值就行更新。

Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式JavaScript框架。Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。其本质上来说也是js代码

vue这种是要耗费很多资源的 因为还要维持vdom的更新 最大的进步是提高了开发效率 提高了开发者的下限 促进了模块化发展

2.props传值多层嵌套的解决方法

vue中给我提供了。provide 和 inject的方式 进行深层组件传递`

vue3中可以如下：

import { provide, ref } from "vue"
export default {
  setup() {
    const foo = ref("hello")
    provide("foo", foo)
    setTimeout(() => {
      foo.value = "我在测试"
    }, 3000)
  }
}
```下层中使用
<template>
  <div>{{ useFoo }}</div>
</template>

<script>
import { inject } from "vue"
export default {
    setup() {
        const useFoo = inject('foo')
        return {
            useFoo
        }
    }
}
</script>

3. 闭包的优缺点与作用
作用：这个函数作用域访问了另外一个函数 里面的局部变量

function fn() {
    var a=abc;
    function b() {
        console.log(a,'b');
    }
   b();
}
fn();```
优点：

①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）。
③匿名自执行函数可以减少内存消耗。（function（）{}）{}

坏处：
 ①被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null。

 ②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响。

**4.css相关

1.盒子水平垂直居中
1>flex定位
 display: flex;
 /* 设置主轴排列方式 默认主轴为水平方向 */
 justify-content: center;
 /* 设置侧轴，也就是垂直方向上的排列方式 */
 align-items: center
2.子相父绝
 
#parent {
    /* 先来给父容器(父元素)设置宽高, 实际上父容器也可以是body元素，此时就不用设置宽高了 */
    width: 300px;
    height: 300px;
    background-color: pink;/*还是为了看的清楚些*/
    /* 先将父容器设置为相对定位 不设置相对定位的话这里会相对于body 来进行绝对定位*/
    position: relative;
}
 
#child {
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
}
3》  通过display：table-cell 实现
只需要给父容器设置属性即可
    .cell{
        width: 200px;
        height: 200px;
        background-color: pink;
        display: table-cell;
        text-align: center;
        /* 注: veetical:竖直 align: 排列  vertical-align: 竖直排列方式*/
        vertical-align: middle;}

2.旋转60°
Transform属性有5个设置平移的属性值：
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

3.渐入渐出的实现
adeIn()与fadeOut()均有三个参数，第一个是事件， 必填；第二个是淡入淡出速度，正整数，大小自己权衡，可选参数；第三个, 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo())， 0~100的正整数值，也是可选参数。
jq可以引用jq组件库。
 //淡入效果(含淡入到指定透明度) 
 function fadeIn(elem, speed, opacity){ 
 /* 
 * 参数说明 
 * elem==>需要淡入的元素 
 * speed==>淡入速度,正整数(可选) 
 * opacity==>淡入到指定的透明度,0~100(可选) 
 */ 
 speedspeed = speed || 20; 
 opacityopacity = opacity || 100; 
 //显示元素,并将元素值为0透明度(不可见) 
 elem.style.display = 'block'; 
 iBase.SetOpacity(elem, 0); 
 //初始化透明度变化值为0 
 var val = 0; 
 //循环将透明值以5递增,即淡入效果 
 (function(){ 
 iBase.SetOpacity(elem, val); 
 val += 5; 
 if (val <= opacity) { 
 setTimeout(arguments.callee, speed) 
 } 
 })(); 
 } 
 
 //淡出效果(含淡出到指定透明度) 
 function fadeOut(elem, speed, opacity){ 
 /* 
 * 参数说明 
 * elem==>需要淡入的元素 
 * speed==>淡入速度,正整数(可选) 
 * opacity==>淡入到指定的透明度,0~100(可选) 
 */ 
 speedspeed = speed || 20; 
 opacityopacity = opacity || 0; 
 //初始化透明度变化值为0 
 var val = 100; 
 //循环将透明值以5递减,即淡出效果 
 (function(){ 
 iBase.SetOpacity(elem, val); 
 val -= 5; 
 if (val >= opacity) { 
 setTimeout(arguments.callee, speed); 
 }else if (val < 0) { 
 //元素透明度为0后隐藏元素 
 elem.style.display = 'none'; 
 } 
 })(); 
 }

**