前端面试必背（实习）

作者: 尼奥尼奥 | 来源:发表于2020-08-08 16:30 被阅读0次

1

什么是VUE？

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex)

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
库（插件）：提供某一个小功能，对项目入侵性比较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。

MVC和MVVM的区别和理解

MVC

是后端的分层开发概念
M层（Model.js——数据操作模块）：只负责操作数据
C层（router.js——路由模块，controller.js——业务逻辑模块）：
路由模块：为了保证职能单一，路由模块只负责分发路由，不负责处理，需要调用controller.js中的方法来处理具体业务。
业务逻辑模块：只负责处理业务逻辑，不负责数据的操作。
V层（View视图层）：前端的页面又被MVVM思想分成了三部分。

MVVM

是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model，View，ViewModel
M：页面中要渲染的数据。
VM：VM是调度者，它分割了M和V，当M中的数据变化，会被VM自动渲染到页面上，当页面上的数据被修改，也会自动同步到M上。
V：页面中用来展示的DOM元素。

MVVM相比MVC来说，提供了数据的双向绑定机制

2

VUE的响应式数据原理

1.核心点：object.defineProperty
2.默认 vue在初始化数据时，会给data中的属性使用object.defineProperty重新定义所有属性，当页面取到对应属性时，会进行依赖收集（收集当前组件的watcher）如果属性发生变化会通知相关依赖进行更新操作。

响应式数据原理.png

3

vue中是如何检测数组变化

使用函数劫持的方法，重写了数组的方法
vue将data的数组，进行了原型链方法的重写，指向了自己定义的数组原型方法，这样当调用数组api时，可以通知依赖更新。如果数组中包含引用类型，会对数组的引用类型再次进行监控。
检测数组变化.png
回顾数组：
数组
 数组方法

4

Vue组件使用

props和$emit

props：父组件通过一个属性传递个子组件数据

props的俩种写法：
export default{
  props:['属性名'];   //方法1 直接获取值
  props:{
    //prop 类型和默认值
    属性名: {
        type:'类型',
        default(){
          return []   //默认值
        }
      }
  }
}

$emit：子组件向父组件通信使用$emit触发一个事件，把从子组件带来的数据进行操作
注意：子组件标签中的时间也不区分大小写要用“-”隔开
子组件

<template>
  <button @click="emitEvent">点击我</button>
</template>
<script>
  export default {
    data() {
      return {
        msg: "我是子组件中的数据"
      }
    },
    methods: {
      emitEvent(){
        this.$emit('my-event', this.msg)
        //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
      }
    }
  }
</script>

父组件

<template>
  <div id="app">
    <child-a @my-event="getMyEvent"></child-a>
    <!--父组件中通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值-->
  </div>
</template>
<script>
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    methods: {
      getMyEvent(msg){
          console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
      }
    }
  }
</script>

组件间的通信——自定义事件

不管俩个组件隔多远，是否为父子组件、兄弟组件等等都可以使用自定义事件去通信
在一个组件中使用event.$on绑定一个事件，在另外一个组件中使用event.$emit触发一个事件

子组件（发送方使用 $emit 自定义事件把数据带过去）

<template>
    <div>
        <span>A组件->{{msg}}</span>
        <input type="button" value="把a组件数据传给b" @click ="send">
    </div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
    data(){
        return {
            msg:{
                a:'111',
                b:'222'
            }
        }
    },
    methods:{
        send:function(){
            vmson.$emit("aevent",this.msg)
        }
    }
}
</script>

子组件（而接收方通过 $on监听自定义事件的callback接收数据）

<template>
 <div>
    <span>b组件,a传的的数据为->{{msg}}</span>
 </div>
</template>
<script>
      import vmson from "../../../util/emptyVue"
      export default {
         data(){
                return {
                    msg:""
                }
            },
         mounted(){
                vmson.$on("aevent",(val)=>{//监听事件aevent，回调函数要使用箭头函数;
                    console.log(val);//打印结果：我是a组件的数据
                    this.msg = val;
                })
          }
    }
</script>

父组件

<template>
     <div>
      <childa></childa> 
      <br />
      <childb></childb>     
     </div>
</template>
<script>
   import childa from './childa.vue';
   import childb from './childb.vue';
   export default {
    components:{
        childa,
        childb
    },
    data(){
        return {
            msg:""
        }
    },
    methods:{
        
    }
   }
</script>

组件生命周期(单个组件)

挂载阶段
更新阶段
销毁阶段

5

JavaScript中的this指向

this是在运行时期绑定的而不是在编译时期绑定的，只有js中的方法运行中才会绑定一个this，它的上下文取决与运行时的各种条件，this的绑定和函数声明的位置没有任何关系，之取决与函数的调用方式。
this的四种绑定方法：

默认绑定：函数被调用的时候默认绑定全局window对象。

默认绑定
隐式绑定：每当我们调用一个对象的方法时，就会出现隐式绑定。

隐式绑定
硬绑定：使用call、apply改变this的指向

硬绑定Call.png
硬绑定Apply.png
构造函数绑定：创造一个构造函数，然后使用变量给实例化

构造函数绑定.png
this绑定练习
this绑定练习.png

6

细谈 axios和ajax区别

区别

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
axios是ajax ajax不止axios。
列出代码对比：

axios
axios({
            url: '/getUsers',
            method: 'get',
            responseType: 'json', // 默认的
            data: {
                //'a': 1,
                //'b': 2,
            }
        }).then(function (response) {
            console.log(response);
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
            }）

$.ajax({
            url: '/getUsers',
            type: 'get',
            dataType: 'json',
            data: {
                //'a': 1,
                //'b': 2,
            },
            success: function (response) {
                console.log(response)；
            }
        })

优缺点

ajax：
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务
axios：
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）

网友评论

前端框架

本文标题：前端面试必背（实习）

本文链接：https://www.haomeiwen.com/subject/irhhdktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！