前端面试 周测题总结

2021 年9月9日周测题

1JS常见的数据类型和判断数据类型的方法

2let var const区别

3**JS 中的this指向

4箭头函数和普通函数的区别

5数组的常用方法

6原型和原型链

7***作用域和闭包

8说一下你的面向对象的理解

9****声明一个父类和子类，实现子类继承父类

10****什么是深拷贝和浅拷贝，并用递归实现深拷贝

2021 年9月26日周测题

1git是什么

2git 常见命令有哪些

3js中常见的数据类型有哪些

4数组常用的方法有哪些

5vue常见的指令

6基本数据类型和引用数据类型的区别

7for in 和for of 的区别

8判断数据类型的方法

9箭头函数和普通函数的区别

10手写深拷贝(递归的形式)

2021年10月7号周测题

1 说一下你理解的Promise?

2 谈一谈你的async和await

3 说一说地狱回调

4 手写一个自定义指令v-show

5 原生ajax步骤(代码)

6 JS寄生组合继承(代码)

7 浏览器从输入URL到页面加载完成发生了什么

8 常见的HTTP状态码有哪些，分别表示什么意思

9 ajax中的get和post请求的区别有哪些

10浏览器的重绘和回流

2021年10月14号周测

1生命周期共有几个钩子函数?分别在什么时候使用

2 简述computed watch的区别及应用场景

3 Vue中父组件向子组件传参(代码)

4 自定义过滤器

5 vue自定义指令(语法，钩子函数，函数参数)

6 简述路由动态传参params和query的区别及如何具体使用

7 列出常用的修饰符以及作用

8 vue组件中的data为什么的一个函数

9 vue 兄弟组件传参(代码)

10 v-if / v-show的区别

周测题

1 Vue双向数据绑定原理？

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步： Watcher(订阅者)是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

2 . 简述computed 、methods、watch的区别及应用场景？

**computed **:有缓存的，当data里面的数据发生变化，随时
重新进行计算
methods: 方法 methods每一次调用时执行使用该方法
watch: 监听属性，用来观察和响应Vue实例上的数据变动

3 Vue中$nextTick的作用

4 Object.defineProperty方法

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

Object.defineProperty(obj, prop, descriptor)
  obj: 要增加或者修改属性的对象   prop: 属性名
  descriptor: 属性描述符  configurable: 布尔值 -->
   是否可重新配置(删除) 默认为 false。
  enumerable: 布尔值 --> 是否可枚举 默认为 false。
 //数据描述符
 value: 默认值
 writable: 布尔值 --> 是否可重写 默认为 false
  //存取(访问)描述符
  get(): 回调函数 当此属性被读取的时候会触发这个回调函数
  (这个属性可以根据其他属性,动态计算当前属性的值)
  set(): 回调函数 当前属性值发生改变之后会触发这个回调函数
 

5 vue修改数据页面不更新

如果为对象添加少量的新属性，可以直接采用Vue.set()

如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象

如果你需要进行强制刷新时，可采取$forceUpdate() (不建议)

6 vue守卫有哪几种,分别是什么

	组件级守卫              单个路由独享守卫   全局守卫
	全局守卫: router.beforeEach()  router.afterEach
	组件级守卫:  beforeRouteEnter  
	beforeRouteUpdate       beforeRouteLeave
	单个路由独享守卫  beforeEnter
	
关于路由守卫 三个参数：
to：表示即将要进入的目标 路由对象；
from：表示当前导航正要离开的路由；
next () ：调用该方法来 resolve 这个钩子。
执行效果依赖 next方法的调用参数。

7 谈一谈你在开发项目的时候都做过哪些优化

去除打印的信息console, 可以在index.html页面上直接重写一个函数还可以使用插件 babel-plugin-transform-remove-console
加载外部的cdn引入是为了减少js/chunk-vendors.******.js的体积
定制首页的内容来区分开发环境与生产环境
路由懒加载 来减少页面渲染视图的性能消耗

8 Vuex是什么，核心内容分别是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
核心内容:state: 数据
actions:可以包含异步操作
mutations: 唯一可以修改state数据的场所
getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）
modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

9 组件中的data为什么是个函数

  从本质上来说，就是基本数据类型和引用数据类型的区别，
  在data中它返回的是一个对象，对象它是一个引用数据类型，
  如果直接将data当成引用对象的值，那其他人在创建组件的时候，
  都是引用的同一块内存空间就会导致公用的组件部分所有就的
  值都指向同一个data，
  会导致所有的数据完全一样，但是通过将所有的数据返回出来后，
  在每次创建这个组件时，
  都会返回一个全新的对象，不会互相影响

10 . vue使用keep-alive缓存页面优化项目

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
作用:防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

原理