面试人生必经之路，掌握基础，才能和hr周旋一番

1.v-show 和 v-if 的区别是什么？

描述:这类问题一般都是面试官的试探，所以简单明了通俗易懂的描述更能加分

答：v-if与v-show都是用来显示与隐藏元素的，v-show是通过操作css的display来进行dom的显示与隐藏，而v-if则是通过操作dom的删除与渲染来进行的，一个是操作样式，一个是操作dom

2.v-for中key的作用

答：key值一般都是唯一的值，比如id的唯一性，这时有两种情况

如果没有key属性，那么for循环的数据发生改变时，则会重新渲染整个结构，这样不但会造成性能上的浪费，还会出现某些隐形的bug，

而有key属性，那么v-for的渲染机制就会改变，他会拿着新旧dom树去做比对，只去渲染发生改变的节点，大大节省了性能，这就体现出了key的重要性

3.vue中data为什么是function

描述：重点来了，从这里起，面试官就要去深入了解你的功力了

答：这里的就跟vue组件相关了，vue里组件就是为了拿来复用的，而data作为存储数据的地方，如果他不是一个函数，那么你在某一处修改了data里的数据，就会造成一变全变的局面

这里data为什么是个函数，目的就是为了给当前整个组件单独开辟一个作用域，让组件与组件之间互不影响，单个的作用域，防止变量冲突确保自己有一个独立的空间

4.vue中双向绑定的原理

答：通过Object.defineProperty()音标：object.滴范特普若普踢 来劫持属性的setter和getter在数据变动时发布消息给订阅者，具体就是，需要observe来进行递归遍历，监听数据的变动，compile来进行数据的解析，一旦数据变化，就去更新视图，还有一个watcher订阅者是observe和compile之间的桥梁，最终利用watcher搭起observe和compile之间的通信桥梁，达到数据变化-> 更新视图

注意哈：以上内容不易理解，如果说完这些你查觉面试官还要接着深入问你，而你还回答不上来时，你可以来个万能回复，这一块我之间有做过了解，但也没太过深入

这里补充一下，面试官还有可能会继续往下问题v-model的双向数据绑定，

5.v-model双向数据绑定

答：这个一般都会用表单标签的数据收集和反馈，还有组件之间的通信，v-model会做两个事情，一个是默认value值用来接收，第二个就是会触发inpit事件，如果你是父子传值，那么完全可以通过input事件，来修改父组件给你传递的值，就不用担心，子组件修改了父组件的值后，数据不一致的问题了

6.keep-alive的作用和呗keep-alive生命的组件的生命周期

答：keep-alive是vue内置的一个组件，用它来包裹组件那么即使你的组件失去激活状态，他也不会销毁，而是把它缓存了起来，下次激活就不需要在重新渲染页面了

这个生命周期有两个一个是activated组件激活时，另一个是deactivated组件失去激活状态时触发

7.说一下vue的生命周期，以及生命周期都做了什么事

答：vue生命周期有4个阶段，初始化-挂载-更新-销毁，每个阶段都有两个方法

初始化前-beforcreate ：初始化指vue实例化到创建模板，初始化前拿不到data里的数据

初始化后-created ：初始化后在这里一般都可以在这里发起网络请求

挂载前-beformount ：挂载是指把模板挂载到index.html上

挂载后-mounted ：挂载后就可以获得真实dom了

更新前-beforupdate ：更新是指，改变了data里的数据，得不到更新后的真实dom

更新后-updated ：更新页面之后，用的不多，可以获取更新后的真实dom

销毁前-beforDestroy ：销毁是指，销毁vue实例，

销毁后-destroyed ：销毁前后，都可以移除全局事件，定时器等，避免造成性能浪费

8.vue什么时候操作dom比较合适，操作时发现有的dom获取不到怎么办？

答：可以在vue的生命周期函数mounted挂载后操作dom，但这个函数不能保证你能获取所有dom，因为一旦dom发生了更新，dom更新是个异步任务，那么异步任务还没执行呢，就去获取肯定获取不到，vue里提供了一个方法，$nextTick方法，这个方法dom更新完成后会触发，就可以解决更新了数据，立即想获取真实dom的操作

9.发送网络请求一般在哪个函数里

答：在created 初始化后的钩子函数里，这里是vue实例已经初始化完成了，紧接着，发起请求最合适

10.vue组件传值有哪些

答：有父向子，子向父，和兄弟之间传值，

父向子通过props属性，来接受父组件传递来的值即可，当然子组件不建议想改父组件传递的值，不然会造成数据不一致，这是可以通过v-model来进行双向数据绑定，

子向父可以通过$emit方法触发父组件事件，并向父组件传值，

兄弟之间传值，使用太过麻烦，还需定义一个容器，一般有毫不相干的组件之间需要共享值时，都会去使用vuex来完成

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

答：首先数组是复杂数据类型，通过下标修改值，并不会被监听到，这时候你可以通过数组的一些方法比如push，splice等方法，去修改数据本身，这些方法都有一个特征就是会返回一个新数组，如果使用不到这些，那么就可以通过$set方法去进行修改数组里的某一项

12.讲一下vuex

答：vuex简单说就是一个容器，

state属性作为存储状态的地方，而想要修改state状态则需要mutations属性里边去定义方法，来修改state属性里的状态，但是mutations里只能做同步任务，想要做异步任务，比如请求数据，则需要actions来进行，

还有getters这个相当于是vue里的计算属性，可以在这里边定义一些快捷访问方式，比如在组件想要vuex模块里的属性还要一层一层.出来比较麻烦，这时候就可以通过getters属性，来创建快捷访问，在getters里边定义属性，访问子模块，这时候组件里就可以很方便的使用了

modules是定义子模块的地方，毕竟随着项目越来越大，需要定义的共享数据也越来越多，这时候使用module来定义模块化，会更方便后期的维护与查阅

13.讲一下虚拟dom和dif算法

答：虚拟dom是vue提高性能的重要一环，简单来说就是，会根据数据的变动来产出一个虚拟dom

而dif算法则是渲染比对新旧dom树的过程，dif算法会优先进行同级比对，就是说如果父节点了，dif算法，就不会再深入子元素比对，而是直接渲染父元素，如果没有那么就继续向下比较子元素，就是能省则省，能不动就不动

14. 路由模式，路由守卫？

答：hash模式，会利用url的hash来模拟一个完整的url当地址改变时，页面不会重新加载，网络路径上也会出现一个#比较安全，

还有一个history模式会去掉#号，还有back go这些方法，来操作页面的前进后退，这个模式一旦刷新页面，那么就会重新加载页面去请求后端，会消耗一些时间

以上这些都是vuex里的比较基础且常问的面试题，同时也很考验各位同学的基础

好了这次就说到这里了，咱们下次再见...