前端面试题

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.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可以监听多个方法吗？

答:可以，栗子：。

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篇