前端面试必背（实习）

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
提供了一些并发请求的接口（重要，方便了很多的操作）

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335