H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】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>

本文地址:H5W3 » 【前端技术】web前端面试题—vue.js面试题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址