前端社招面经七

安安安安安沅

已于 2022-03-15 14:32:20 修改

阅读量389

点赞数

分类专栏：前端 - 面经文章标签：前端

于 2022-02-14 10:23:58 首次发布

本文链接：https://blog.csdn.net/qq_37899622/article/details/122919319

版权

前端 - 面经专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、vue的生命周期？常用的是什么？mounted和created什么时候用，有什么区别？

vue生命周期详解
常用：
①created使用场景（操作数据）：

发送ajax请求（调用请求数据的方法）；
操作data中的数据和methods里的方法（更推荐在这里发送ajax请求）；
获取本地数据。

②mounted使用场景：

发送ajax请求；
操作DOM（推荐在这里操作DOM）。

v-if 根据表达式的值在DOM中生成或移除一个元素
v-show 根据表达式的值显示或隐藏元素(v-show 不支持 <template> 元素，也不支持 v-else)
v-for 循环指令，用于遍历数组(对象)的每一个值
v-model 用来在input,text等表单控件元素上创建双向数据绑定
v-html 注意：不建议在网站上动态渲染HTML片段，容易导致XSS攻击
v-on 用于绑定事件监听器(@, 例如@click)
v-bind 用来动态绑定元素特性(:, 例如:class)

②v-if和v-show：
（1）区别：
手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存后，然后再切换的时候进行局部卸载)；v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。
（2）总结：
v-if判断是否加载，可以减轻服务器的压力，在需要时加载，但有更高的切换开销；v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。
如果需要非常频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

③v-if和v-for可以同时使用吗？
永远不要把v-if和v-for同时用在同一个元素上。v-if和v-for同时用在同一个元素上会带来性能方面的浪费，因为v-for的优先级比v-if高，每次渲染都会先循环再进行条件判断。
在这里插入图片描述

五、component组件了解吗？

在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中<component>用:is来动态挂载不同的组件。

<template>
  <div style="padding: 30px">
    <button @click="change('1')">组件1</button>
    <button @click="change('2')">组件2</button>
    <button @click="change('3')">组件3</button>
    <component :is="componentTag"></component>
  </div>
</template>

<script>
import component1 from './component1'
import component2 from './component2'
import component3 from './component3'

export default {
  components: {
    component1,
    component2,
    component3
  },
  data () {
    return {
      componentTag: ''
    }
  },
  methods: {
    change(index) {
      this.componentTag = 'component' + index
    }
  }
}
</script>

<style scoped>
</style>

六、ES6了解多少？解构赋值了解吗？

ES6新特性
（1）新增了声明变量的关键字let和const
在这里插入图片描述
var、let和const的区别：
①var声明的变量会挂载在window上，而let和const声明的变量不会
②var声明变量存在变量提升，let和const不存在变量提升
③let和const声明形成块作用域，而var声明的变量作用域为函数作用域或全局作用域
④同一作用域下let和const不能声明同名变量，而var可以
⑤const一旦声明必须赋值,不能使用null占位；声明后不能再修改；如果声明的是复合类型数据，可以修改其属性
⑥暂存死区

var a = 100;
if(1){
    a = 10;
    //在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
    // 而这时，还未到声明时候，所以控制台Error:a is not defined
    let a = 1;
}

（2）解构赋值
解构赋值是新增的语法，能够方便我们为变量赋值。ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。
在这里插入图片描述

总结：

解构赋值就是把数据结构分解，然后给变量进行赋值
如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
利用解构赋值能够让我们方便的去取对象中的属性跟方法

（3）箭头函数

箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁
箭头函数的优点在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题
（4）模板字符串
可以使用反引号``来进行字符拼接。${}

（5）函数传参可以有默认值

function printText(text = 'default') {
  console.log(text)
}

（6）for…of

for of遍历的是键值对中的值
for in遍历的是键值对中的键
（7）class类
（8）导入导出
导入improt
导出export default
（9）promise
用于更优雅地处理异步请求。

（10）async/await
比promise更好的解决了回调地狱。
（11）Symbol
新的基本类型
（12）Set集合

（13）展开运算符和剩余运算符(用…表示)

七、说说js的两大数据类型？做过类型判断吗？

（1）js的两大数据类型
①基础数据类型：
Number、String、Boolean、undefined、Null

ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。
谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。

②复杂数据类型：
object（Array、function、Data等）
Object本质上是由一组无序的名值对组成的。
（2）js判断数据类型的几种方法
js判断数据类型的几种方法
①typeof
②instanceof
③根据对象的constructor判断
④很繁琐的方法： prototype
⑤无敌万能的方法：$.type() / jquery.type()

八、sessionStroage，localstorage的区别？Cookie和Session的区别？

前端常见面试 - 存储/缓存
 cookie和session的区别

安安安安安沅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端社招面经七

一、vue的生命周期？mounted和created什么时候用，有什么区别？二、虚拟dom是什么？为什么要使用？三、vue常用的指令？v-if和v-show的区别，什么情况下使用？v-if和v-for可以同时使用吗？四、ES6了解多少？...
复制链接

扫一扫