当前位置: 首页 > Web前端 > vue.js

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

时间:2023-04-01 01:40:25 vue.js

1.vue中的v-show和v-if是做什么用的,两者有什么区别?v-if和v-show都控制元素的隐藏和显示。区别:方法:v-show底层原理是操作元素的display属性,v-if底层是控制元素的创建/销毁Rebuild内部事件监听器和子组件;v-show只是根据css切换编译条件:v-if是惰性的,如果初始条件为false,则什么都不做;只有当条件第一次为真时才开始部分编译(编译缓存后,切换时再进行部分卸载);v-show在任何条件下(无论第一次条件是否为真)编译,然后缓存,保留DOM元素。性能消耗:v-if有较高的切换消耗;v-show初始渲染消耗较高;使用场景:基于以上区别,如果需要切换非常频繁,还是用v-show比较好;如果运行时条件很少变化,最好用v-ifv-if:scene---->权限验证v-show:scene---->显示页面,类似一些tab等2.vue父组件如何触发子组件的功能,子组件如何触发父组件的功能获取父组件中的子组件功能:$children,$refs获取子组件中的父组件功能component:$on4.vue-router导航Hook有哪几种1.全局hook功能:跳转前判断拦截。2.独享单一路由3.组件级*全局导航钩子router.beforeEach(to,from,next),router.beforeResolve(to,from,next),router.afterEach(to,from,next)*components内部钩子beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave*分离路由的独占组件beforeEnter5.v-model是什么?如何使用?vue中标签如何绑定事件?可以实现双向绑定,指令(v-for、v-if、v-else、v-on、v-class)。vue的model层的data属性。绑定事件:6、你对vue了解多少,什么是Vuex、VueRouter;如何避免Vuex中函数造成的全局污染?Vuex是状态管理,集中存储和管理应用所有组件的状态,可以理解为一个全局仓库。VueRouter是一种路由(spa)单页应用方式,避免全局污染:1.唯一变量:将所有变量挂载在同一个命名空间2.使用闭包7.为什么不能通过mutation修改state中的参数的vuex会报错,但是直接改变state中的参数会报错。Vue2取消冒泡所有$emit。使用vuex定义全局状态组件。修改状态父组件以访问状态值。8、什么是spa应用,spa页面和传统页面有什么区别?是一种特殊的网络应用程序。它将所有活动限制在一个网页中,只在网页初始化时加载相应的HTML、JavaScript和CSS。页面加载完成后,SPA不会因为用户操作而重新加载或跳转页面。好处:①.用户体验好且速度快,内容变化不需要重新加载整个页面,避免了不必要的跳转和重复渲染②。基于以上几点,SPA对服务器的压力相对较小9.简单说明在vue.jsES6中使用插件的步骤import...from...语法或CommonJSrequire()方法导入插件使用全局方法Vue.use(plugin)要使用插件,可以传入一个选项对象Vue.use(MyPlugin,{someOption:true})懒加载插件的使用方法:Vue.use(VueLazyload,{loading:require('common/image/default.png')})10.请列举3个Vuecreated中常用的生命周期钩子函数:实例创建后调用。到这一步,实例已经完成了数据的观察,属性和方法的计算,watch/event事件回调。但是,挂载阶段还没有开始,$el属性还不可见。mounted:el这个钩子在新创建的vm.el挂载到实例上后被调用。如果根实例挂载文档内元素,则调用mounted时vm.$el也在文档中。activated:11.vue.js中激活keep-alive组件时引入组件有几种方式?分别简单描述一下两个步骤:使用ES6的import...from...语法或者CommonJS的require()方法导入组件步骤:先注册,再使用//registerVue.component('my-component',{template:'

helloworld!!
'})//使用组件