前端面试题

vue篇

1.双向绑定是什么意思?VUE双向绑定原理?

答:双向是指ViewModel中的data部分和View之间的双向关系。分为正向绑定、反向绑定
  正向:数据驱动页面
  反向:页面更新数据
原理:双向绑定都是依赖ES5中一个重要的API,Object.defineProperty
数据劫持结合发布-订阅者的方式;通过Object.defineProperty来劫持各个属性的getter\setter来监听属性变化,实现Observer监听,生成订阅者列表(dep),通过订阅者(Watcher)依次要更新

2.v-show和v-if的区别

答:
  相同点:都是控制Dom元素是否显示
  不同点:v-show通过样式控制;v-if是动态的向DOM树内添加或者删除DOM元
  性能:如果要频繁切换某节点时,使用v-show(无论true或者false初始都会进行渲染,此后通过css来控制显示隐藏,因此切换开销比较小,初始开销较大),如果不需要频繁切换某节点时,使用v-if(因为懒加载,初始为false时,不会渲染,但是因为它是通过添加和删除dom元素来控制显示和隐藏的,因此初始渲染开销较小,切换开销比较大)

3.v-if和v-for的优先级

答:v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。

4.组件传参的方式

答:
  父子传参:props,父页面绑定,子页面获取
  子父传参:this.$emit事件驱动
  兄弟传参:but vuex localStorage、sessionStorage

5.动态路由获取参数

答:在path中/:id 通过this.router.params.id和this.router.query.id获取

6.vue更新数组时触发视图更新的方法

答:push();pop();shift();unshift();splice(); sort();reverse()

7.computed和watch的区别

答:
  计算属性computed :
    1. 支持缓存,只有依赖数据发生改变,才会重新进行计算
    2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
    3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
    4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
    5.如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
  侦听属性watch:

1. 不支持缓存,数据变,直接会触发相应的操作;
    2.watch支持异步;
    3.监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
    4. 当一个属性发生变化时,需要执行对应的操作;一对多;
    5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,
      immediate:组件加载立即触发回调函数执行,
      deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。

8.keep-alive的作用是什么?

答:keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染

9.如何获取dom?

答:添加ref属性name 通过this.$refs.name获取

10.vue-loader是什么?使用它的用途有哪些?

答:vue文件的一个加载器,将template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等

11.为什么使用key?

答:需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。这里不推荐使用循环索引值,使用唯一属性,保持数据标识唯一性

12.v-modal的使用。

答:v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
  v-bind绑定一个value属性;v-on指令给当前元素绑定input事件

13.请说出vue.cli项目中src目录每个文件夹和文件的用法?

答:答:assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置; app.vue是一个应用主组件;main.js是入口文件

14.v-on可以监听多个方法吗?

答:可以,栗子:<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。

15.生命周期

答:
  beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
  create:data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作
  beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的
  mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行
  beforeUpdate: 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
  updated:页面显示的数据和data中的数据已经保持同步了,都是最新的
  beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
  destroyed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

16.第一次页面加载会触发哪几个钩子?

答:beforeCreate, created, beforeMount, mounted

17.简述每个周期具体适合哪些场景

答:

18.vue获取数据在哪个周期函数

答:一般 created/beforeMount/mounted 皆可

19.Mixin混入原理及使用

答:全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。
使用的话 在main.js中直接new vue 的时候直接注入,然后在单页面中直接使用定义好的方法。

vue-router篇

vuex篇

1.vuex是什么?怎么使用?哪种功能场景使用它?

答:vue框架中状态管理。在main.js引入store,注入。
新建了一个目录store.js,….. export 。
场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

怎么获取和更改state

答:this.$store.state
在mutations里定义大写参数,是个箭头函数参数是state操作set赋值,然后在actions定义函数函数使用commit触发

2.vuex有哪几种属性?

答:有五种,分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex

3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?

答:如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用。

webpack篇

区别:

loader 是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中
plugin 赋予了 webpack 各种灵活的功能,例如打包优化、资源管理、环境变量注入等,目的是解决 loader 无法实现的其他事
loader 运行在打包文件之前
plugins 在整个编译周期都起作用
在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果
对于 loader,实质是一个转换器,将 A 文件进行编译形成 B 文件,操作的是文件,比如将 A.scss 或 A.less 转变为 B.css,单纯的文件转换过程
编写loader:其本质为函数,函数中的 this 作为上下文会被 webpack 填充,因此我们不能将 loader 设为一个箭头函数
函数接受一个参数,为 webpack 传递给 loader 的文件源内容
函数中 this 是由 webpack 提供的对象,能够获取当前 loader 所需要的各种信息函数中有异步操作或同步操作,异步操作通过 this.callback 返回,返回值要求为 string 或者 Buffe

JS篇

CSS篇

推荐阅读更多精彩内容

  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    彩云_789d阅读 47评论 0 0
  • js闭包概念:在函数内壁定义一个子函数,可以用子函数访问父函数的私有变量,执行完成操作后将函数通过return对象...
    瞳孔里的温柔你看得见不阅读 722评论 0 4
  • 1、active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-li...
    world_7735阅读 430评论 0 6
  • js闭包概念:在函数内壁定义一个子函数,可以用子函数访问父函数的私有变量,执行完成操作后将函数通过return对象...
    这是这时阅读 76评论 0 0
  • 01 前言 2020是不平凡的一年,这一年里发生许多事情,大家也都知道。对于互联网行业来说也是一次重大的打击,也有...
    前前前端小飞阅读 21,512评论 4 54