面试题小练习

1、v-if和v-show的区别

答：v-if采用直接从DOM树上移除的方式隐藏元素，v-show是采用display:none的方式隐藏元素。频繁切换显示隐藏的情况下建议使用v-show。

2、v-for中key的作用

答：key作为唯一值的主要作用是为了提高更新虚拟dom的性能

3、vue中data为什么是function

答：组件中的data写成函数，数据是以函数的返回值形式定义的，每复用一次，就会产生一个
      新的data。创建一个新的私有空间，这样的话各个组件实例都有各自的实例，如果写成对象
      形式，就容易造成数据污染，使得所有组件实例之间共用一份data

4、vue中双向绑定的原理

答：通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布
      消息给订阅者，触发相应的监听回调。

5、keep-alive的作用和被keep-alive声明的组件的生命周期

答：keep-alive作用主要是缓存内部实例，避免重复渲染DOM。

       生命周期：页面第一次进入的时候，钩子的触发顺序为created->mounted->activated，退出时则触发deactivated。当再次进入时，只触发activated。

6、说一下vue的生命周期，以及生命周期都做了什么事情

答：vue生命周期分为四大阶段，八个方法。

       一、初始化阶段，两个方法分别为beforeCreate和created。vue实例从创建到编译模板执行了这两个钩子函数。created函数能获取data，但不能获取真实DOM。

      二、挂载阶段，两个方法分别为beforeMount和mounted。vue实例显示执行了这两个钩子函数。此时在mounted里可以获取真实DOM。

     三、更新阶段，两个方法分别为beforeUpdate和updated。在数据发生变化并更新页面后，就执行updated钩子函数，并且在这个钩子函数中可以获取到更新后的DOM。

    四、销毁阶段，两个方法分别为beforeDestroy和destroyed。一般在这两个钩子函数中做手动消除计时器处理。

7、vue什么时候操作DOM比较合适？操作时发现有的组件获取不到怎么办？

.mounted不能保证所有子组件被挂载，因此需要使用$nexttick

答：在能获取到真实DOM以后操作才会比较合适，也就是挂载完以后在mounted钩子函数中可以操作真实DOM。

8、发送网络请求在那个函数中？

答：在created()中发送请求

9、vue组件间传值有哪些方式

答：一、父向子传值（props）：子组件内用props定义变量，子组件中使用变量；父组件内使用子组件，用属性方式给props变量传值，并且从父到子的数据流向这个过程为单向数据流，props变量本身是只读不能重新赋值。

       二、子向父传值：在父组件中自定义事件和方法“@自定义事件='父methods函数' ”，等待子组件触发事件并且给方法传值“ this.$emit('自定义事件名'，值) ”

      三、兄弟组件（跨组件通信EventBus）

10、vue中改变数组内索引的值，数据不更新，如何处理

答：Vue.set(需要修改的数据源，需要修改的项的索引，修改的值)
      this.$set(需要修改的数据源，需要修改的项的索引，修改的值)

11、讲一下vuex

答：vuex 是一个专门为vue.js应用程序开发的状态管理模式，它采用集中管理所有的数据状态。便于实现组件之间数据的共享，节省开发时间。vuex中存储的所有数据均为响应式的，页面数据和存储的数据会同步变化。并且还具有模块化的功能。

      vuex中包含state（存储数据状态），mutations（修改状态，只能进行同步操作），actions（可以进行异步操作），getters（数据状态基础上更新，类似计算属性）四种数据状态。

12、对MVVM的理解

答：MVVM是一种软件架构模式，M即model数据类型（在data里定义），V即view视图（html页面），VM即ViewModel视图模型（vue.js源码）。MVVM通过数据双向绑定让数据自动地双向同步，用户无需再操作DOM。修改视图数据自动同步，修改数据视图会自动同步。

13、第一次页面加载时会触发哪几个钩子函数

答：第一次页面加载时会触发beforeCreate，created，beforeMounted，mounted这四个钩子函数。

14、对axios的理解

答：axios是基于原生ajax和Promise技术封装的通用于前后端的请求库，默认发给后台请求体数据格式是json字符串格式，axios的使用一般是全局配置。

15、讲一下原型链

答：构造函数可以new出来一个实例对象，实例对象可以通过.--proto--找到它的原型对象prototype，原型对象可以通过.constructor返回构造函数，构造函数也可以也可以通过.prototype找到它的原型对象。对象实例自身找不到的方法可以去它的原型对象身上找，如果原型对象上也没有，则去原型对象的原型对象上找，如果还没有，则返回为null。

16、讲一下闭包原理

答：指一个函数有权访问另一个函数作用域中的变量，这样延伸了变量的作用范围，但是会造成内存泄漏，所以在每次使用完这个数据以后，要手动赋值为null。

17、讲一下sessionStorage和localStorage的区别

答：sessionStorage是在当前页面关闭的时候存储的数据就会自动销毁，而localStorage则是永久存储，除非手动删除，否则数据永远不会丢失。