web前端面试题---vue.js面试题

1.vue中的v-show和v-if是作什么用的，二者之间的区别是什么？

v-if 和 v-show 二者都是控制元素的隐藏和显示的。

区别：
方式：v-show 底层原理是操做元素的display属性，v-if 底层是操控元素的建立/销毁

编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程当中合适的销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 css 切换

编译条件：v-if 是惰性的，若是初始条件为假，则什么也不作；只有在条件第一次变为真时才开始局部编译（编译被缓存后，而后再切换的时候进行局部卸载）；v-show 是在任何条件下（首次条件是否为真）都被编译，而后被缓存，并且DOM元素保留。

性能消耗：v-if 有跟高的切换消耗；v-show 有更高的初始渲染消耗；

使用场景：
基于以上区别，所以若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不多改变，则使用 v-if 较好

v-if：场景---->权限校验的时候

v-show：场景---->展现页面，相似于一些选项卡等

2.vue 中父组件如何触发子组件的函数，子组件如何触发父组件的函数

父组件中获取子组件函数：$children、$refs
子组件中获取父组件函数：$on

4.vue-router 有哪几种导航钩子

1.全局钩子  做用：跳转前进行判断拦截。
    2.单个路由独享的
    3.组件级的
    
* 全局导航钩子  
    router.beforeEach(to, from, next),  
    router.beforeResolve(to, from, next),  
    router.afterEach(to, from ,next)

* 组件内钩子  
    beforeRouteEnter,  
    beforeRouteUpdate,  
    beforeRouteLeave
 
* 单独路由独享组件  
    beforeEnter

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

能够实现双向绑定，指令（v-for、v-if、v-else、v-on、v-class）。
vue 的 model 层的 data 属性。
绑定事件：

<input @click = doLog() />

6.对 vue 了解多少，什么是 Vuex、 VueRouter;如何避免 Vuex 中的函数形成全局污染？

vuex 为状态管理，它集中存储管理应用的全部组件的状态，能够理解成一个全局仓库。
VueRouter是路由（spa）单页面应用的方式
避免全局污染：
1.惟一变量：将变量都挂载到同一个命名空间下
2.使用闭包

7.为何经过 vuex 的mutation 修改 state 中的参数就不会报错，而直接更改state 中的参数就会报错

vue2 取消冒泡所有$emit 用 vuex 定义全局 state 组件修改 state 父组件访问state值

8.什么是 spa 应用，spa 页面和传统的页面有什么区别？

是一种特殊的 Web 应用。

它将全部的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会由于用户的操做而进行页面的从新加载或跳转。

好处：

①.户体验好、快，内容的改变不须要从新加载整个页面，避免了没必要要的跳转和重复渲染

②.基于上面一点，SPA相对对服务器压力小

9.简述在 vue.js 中使用插件的步骤

采用 ES6 的 import ... from ... 语法或 CommonJS 的 require（）方法引入插件
使用全局方式 Vue.use( plugin ) 使用插件，能够传入一个选项对象 Vue.use(MyPlugin,{ someOption:true })

如何使用懒加载插件：

Vue.use(VueLazyload, {
  loading: require('common/image/default.png')
})

10.请列举出3个Vue中经常使用的生命周期钩子函数

created：实例已经建立完成以后调用，在这一步，实例已经完成数据观测，属性和方法的运算，watch/event 事件回调，然而，挂载阶段尚未开始，$el 属性目前还不可见

mounted：el被新建立的 vm.el 替换，并挂载到实例上去以后调用该钩子若是 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

activated：keep-alive组件激活时调用

11.vue.js 中引入组件有几种方式？分别简述步骤

两种：采用 ES6 的 import ... from ... 语法或 CommonJS 的 require() 方法引入组件

步骤：先注册，再使用

//注册

Vue.component( 'my-component',{
    template:'<div> hello world！！</div>'
})

//使用组件
<my-component></my-component>