前端面试题vue.js篇合集-持续更新中

1、vue如何实现数据双向绑定？

答：简单地说使用Object.defineProperty()用于监听data来更新view层的数据，其中运用到set和get方法使view层更新数据

2、你对vuex的认识？

答：vuex有五种状态和属性，分别是 State、 Getter、Mutation 、Action、 Module （就是mapAction等）；程序流程：页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值；其中State特性是存放数据的地方，类似一个仓库，当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（若是store中的数据发生改变，依赖这个数据的组件也会发生更新); Getter特性是用来获取数据，mapgetter经常在计算属性中被使用；Mutation特性是1、Action 类似于 mutation，不同在于：2、Action 提交的是 mutation，而不是直接变更状态。3、Action 可以包含任意异步操作；vuex优点是：响应式数据状态管理工具，常用在各个组件之间的数据使用，不会因为组件销毁而失效；

3、vue-router 如何实现跳转？

答：首先在router里的index.js中导入组件，并制定路劲、路劲名称、要跳转的组件页面；页面组件中通过rotuer-link标签使其跳转，也可以通过this.$router.push()实现跳转。

4、filters用过没有？

答：filters又叫做过滤器，是对绑定在页面中初始化的数据进行计算或是过滤用的；

5、vue生命周期？

答：

      created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶                       段还没有开始, $el属性目前还不可见
      mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root实例挂载了一个文档内元素，当                                   mounted 被调用时 vm.$el 也在文档内。
      activated::keep-alive组件激活时调用

6、vue中 key 值的作用？

答：key是在v-for中用到的属性，它的作用是为每个循环出来的html添上一个id，主要用于页面的局部渲染，如果不标注则会对这个v-for的dom整体从写，影响性能！

7、vue中父子组件数据通信的方法？

答：父传子：1、子组件使用prop方法；2、子组件定义ref，通过this.$refs.变量名传值；子传父：使用this.$emit(’fn‘，data) ,同时在父组件使用这个方法；fn(data)

8、vue等单页面应用及其优缺点？

      优点：
            1、具有桌面应用的即时性、网站的可移植性和可访问性。
            2、用户体验好、快，内容的改变不需要重新加载整个页面。
            3、基于上面一点，SPA相对对服务器压力小。
            4、良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端                      地位对等，后端API通用化。
            5、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；
     缺点：
            1、不利于SEO。（如果你看中SEO，那就不应该在页面上使用JavaScript，你应该使用网站而不是Web应用）
            2、初次加载耗时相对增多。
            3、导航不可用，如果一定要导航需要自行实现前进、后退。

9、v-show和v-if指令的共同点和不同点?

答：v-show是将次组件渲染，用js控制此组件的css，将display:none;v-if是通过craterElement的方法决定要不要创建组件；共同点都可实现组件的展不展示，不同点，v-show适合于联动场景，性能高过v-if不用重写dom; 而v-if适合于登入后的权限页面的控制，换句话说也就是进入页面后决定了唯一性；

10、如何让CSS只在当前组件中起作用?

答：在当前组件内的style的标签中加入scoped; <style scoped></style>

11、watch监听的用法？

答：用于监听数据的变化，并做出想要的数据处理或是样式变更；场景当组件渲染后不会因为其他数据变动，而自身变动此时就需要监听某个变量，变动后对需要联动的数据进行更新或样式修改；如果是obj或arr数据我们需要deep属性深度监听immeditate（是否立即执行）不常用。

12、watch与computed的区别？

答：watch不支持缓存，数据变，直接会触发相应的操作。watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；当一个属性发生变化时，需要执行对应的操作；一对多；监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数；computed支持缓存，只有依赖数据发生改变，才会重新进行计算；不支持异步，当computed内有异步操作时无效，无法监听数据的变化如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

13、vue中是否用es6语法开发？let与const的区别？

答：是的现在开发中普遍都用ES6的语法；let和const都是定义变量的标识，let是临时变量，const为常量，let可以被重新赋值；const,无法对string、number、array、object、list直接赋值，但是可以通过遍历对其修改内部值，其中list可以不用双层循环就能达到改变数组中每个对象的val值；注：数组遍历时可添加新数据，对象遍历时可新增key，val；