前端面试常问合集

puzhiren819

已于 2022-05-24 10:29:18 修改

阅读量167

点赞数 4

分类专栏： vue js 文章标签： vue.js 前端面试

于 2022-05-24 10:23:14 首次发布

本文链接：https://blog.csdn.net/qq_60163657/article/details/124941499

版权

vue 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

18 篇文章 1 订阅

订阅专栏

JS数据类型

面试官：JavaScript中什么是基本数据类型什么是引用数据类型？以及各个数据类型是如何存储的？⭐⭐⭐⭐⭐

答：

基本数据类型有

Number

String

Boolean

Null

Undefined

Symbol(ES6新增数据类型)

bigInt

引用数据类型统称为Object类型，细分的话有

Object

Array

Date

Function

RegExp

基本数据类型的数据直接存储在栈中；而引用数据类型的数据存储在堆中，每个对象在堆中有一个引用地址。引用类型在栈中会保存他的引用地址，以便快速查找到堆内存中的对象。

顺便提一句，栈内存是自动分配内存的。而堆内存是动态分配内存的，不会自动释放。所以每次使用完对象的时候都要把它设置为null，从而减少无用内存的消耗

为什么typeof null是Object⭐⭐⭐⭐

答：

因为在JavaScript中，不同的对象都是使用二进制存储的，如果二进制前三位都是0的话，系统会判断为是Object类型，而null的二进制全是0，自然也就判断为Object

这个bug是初版本的JavaScript中留下的，扩展一下其他五种标识位：

000 对象

1 整型

010 双精度类型

100字符串

110布尔类型

==和===有什么区别⭐⭐⭐⭐⭐

答：

===是严格意义上的相等，会比较两边的数据类型和值大小

数据类型不同返回false

数据类型相同，但值大小不同，返回false

==是非严格意义上的相等，

两边类型相同，比较大小

两边类型不同，根据下方表格，再进一步进行比较。

Null == Undefined ->true

String == Number ->先将String转为Number，在比较大小

Boolean == Number ->现将Boolean转为Number，在进行比较

Object == String，Number，Symbol -> Object 转化为原始类型

Vue生命周期函数

1、beforeCreate 组件实例被创建之初

执行时组件实例还未创建，一般用于插件开发中执行一些初始化任务

2、created 组件实例已被完全创建

组件初始化完毕，各种数据可以使用，常用于异步数据获取

3、beforeMount 组件挂载之前

未执行渲染，更新，DOM未创建

4、mounted 组件挂载到实例上去之后

初始化创建，DOM已创建，可用于获取访问数据和DOM元素

5、beforeUpdate 组件数据发生变化，更新之前

更新前，可用于获取更新前各种状态

6、updated 组件数据更新之后

更新后，各种状态已是最新

7、beforeDestroy 组件实例销毁前

销毁前，可用于一些定时器或订阅的取消

8、destroyed 组件实例销毁后

v-show和v-if的区别

v-show指令：元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏

v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示

v-if需要操作dom元素，有更高的切换消耗，v-show只是修改元素的的CSS属性有更高的初始渲染消耗，如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好

Vue的双向数据绑定

数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

在vue里面使用v-model实现双向数据绑定，原理是检测用户输入，把输入的值获取到，然后同步更新给页面的元素

MVVM和MVC的区别详解

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。Model指的是后端传递的数据。View指的是所看到的页面。ViewModel 是mvvm模式的核心，它是连接view和model的桥梁。
它有两个方向：

    一是将model转化成view，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
    二是将view转化成model，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
    这两个方向都实现的，我们称之为数据的双向绑定。

总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。

vue,通过数据的双向绑定，v变化m也变化，反之亦然

MVVM比mvc精简解决了数据频繁更新问题不用再操作DOM

最大的区别是实现了view和model的自动同步

原型、构造函数、实例三者关系

关系：
每个构造函数都有一个原型属性prototype，它指向原型对象
原型对象都包含一个指向构造函数的指针（constructor）
而实例都包含一个指向原型对象的内置指针（__ proto__）


function Person(){ } //构造函数
Person.prototype.name = "bree";      //在构造函数的原型对象上添加属性
Person.prototype.isName = function(){
	alert(this.name)
}
var bree = new Person();        //调用构造函数创建的实例bree
    
console.log(bree.__proto__ === Person.prototype);   //true
console.log(Person.prototype.constructor === Person);  //true

CSS盒模型是什么

width/height：内容的宽高
padding：内边距
border：边框
margin：外边框

html中的div标签和p标签的语义区别

div：框架布局

在网页中框架布局一般使用DIV布局，无论大小DIV盒子一般均使用DIV标签（<div> </div>）布局。

p：段落
一般文章段落都是使用p标签，即每段文字开始时候使用<p>结束时使用</p>，这样文章段落分明

vue的三种传值方式：父传子，子传父，子传子

1 父传子
2 子传父
3 非父子传值

父组件向子组件进行传值(父传子)

父组件：

<div>
  <input type="text" v-model="name">
  <!-- 引入子组件 -->
  <child :inputName="name"></child>
</div>

<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

子组件：

<div>
  <span>{{inputName}}</span>
</div>

<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }

2.子组件向父组件传值（子传父）
子组件：

<div>
  <span>{{childValue}}</span>
  <!-- 定义一个子组件传值的方法 -->
  <input type="button" value="点击触发" @click="childClick">
</div>

<script>
  export default {
    data () {
      return {
        childValue: '我是子组件的数据'
      }
    },
    methods: {
      childClick () {
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>

父组件：

<div>
  <span>{{name}}</span>
  <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
  <child @childByValue="childByValue"></child>
</div>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue(childValue) {
        // childValue就是子组件传过来的值 this.name = childValue} 
     } 
   }  
</script>