vue面试题整理

vue是什么？

vue是构建数据驱动的web界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue是一种mvc和mvvm模式的开发框架，他的v-model可以实现数据的双向绑定。
不用操作dom节点并可以用v-for进行数据渲染。

vue的优点是什么?

a.低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
b.可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
c.独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
d.可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

vue当中的指令和它的用法？

v-if、v-show：判断是否隐藏；v-for：数据循环出来；v-on：监听事件、@change、@click；v-bind:class：绑定一个属性；v-model：实现双向绑定。

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

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏。
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果。

v-model是什么？怎么使用？ vue中标签怎么绑定事件？

可以实现双向绑定。
vue的model层的data属性。绑定事件：<input @click=doLog() />

vue的双向绑定？

既可以把变量的数据绑定给节点，也可以把节点的值绑定给变量的数据。

vue路由怎么使用？

1.下载安装（用webpack新建vue项目时，默认选择安装vue-router），
2.创建路由文件，
3.在router文件夹里的index.js里配置路由，
4.在main.js中引入router文件夹下的router.js文件
5.在app.vue里设置锚点 （router-link 和 router-view ，routerlink链接到的路由会展示在router-view里，如果没有router-view标签且index.js设置路由的name属性则页面会直接跳转）

vue中<keep-alive>的作用？

把切换出去的组件保留在缓存中，可以保留组件的状态或者避免重新渲染。

组件之间的传值通信？

父组件向子组件传值：

1.子组件在props中创建一个属性，用来接收父组件传过来的值；
2.在父组件中注册子组件；
3.在子组件标签中添加子组件props中创建的属性；
4.把需要传给子组件的值赋给该属性。

子组件向父组件传值：

1.子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
3.在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

vue的生命周期内置

vue的生命周期内置8个钩子函数，创建前后，挂载前后，更新前后，销毁前后。

生命周期	详细
beforeCreate（创建前）	组件实例更被创建，组件属性计算之前，数据对象data都为undefined，未初始化。
created（创建后）	组件实例创建完成，属性已经绑定，数据对象data已存在，但dom未生成，$el未存在。
beforeMount（载入前）	vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，data.message未替换。
mounted（载入后）	vue实例挂载完成，data.message成功渲染。
beforeUpdate（更新前）	当data变化时，会触发beforeUpdate方法。
updated（更新后）	当data变化时，会触发updated方法。
beforeDestroy（销毁前）	组件销毁之前调用。
destroyed（销毁后）	组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除事件监听和dom绑定，但dom结构依然存在。

axios是什么？怎么使用？

axios 是一个基于 Promise 的，为浏览器和 Node.js 设计的 HTTP 客户端。它尽可能简化封装了 HTTP 相关的各种操作，在 Web App 中使用非常方便。
Vue 2 官方建议在由 Vue 构建的 SPA 中使用 axios 进行 HTTP 操作。
axios 用于请求后台资源的模块。npm install axios -S装好，
然后发送的是跨域，需在配置文件中config/index.js进行设置。
后台如果是Tp5则定义一个资源路由。js中使用import进来，
然后.get或.post。返回在.then函数中如果成功，
失败则是在.catch函数中。

vuex

vuex是一个专门为vue.js设计的集中式状态管理架构。我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。如果没有vuex 请求到的数据在页面刷新后就必须再请求一次，但是有了vuex就可以把这些数据当做状态保存到vuex中，在中大型项目中有很多共用的数据，就可以用vuex。
比如单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车就可以使用。

vuex有哪几种属性？

有五种，分别是 state（访问状态对象）、getter（计算过滤操作）、mutation（修改状态）、action（异步修改状态）、 module（模块组）

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

将当前组件的<style>修改为<style scoped>

scss是什么？

预处理css，把css当前函数编写，定义变量,嵌套。

vuejs与angularjs的区别？

相同点：

都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。

不同点：

1.AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说，这个优化差异还是比较明显的。

vue不操作DOM节点查找元素

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了。