Vue面试题整理——持续更新中 柔光的暖阳◎ 2022-11-15 11:58 259阅读 0赞 # vue面试题系列(持续更细ing。。。) # ### 一、vue组件注册 ### 组件注册有2种注册方式:全局注册、局部注册。 (1)全局注册:使用Vue.component('组件名称',\{ /\* 组件内容 ----template \*/ \}),注册之后可以在任一组件中使用 (2)局部注册:1、定义子组件-》2、引入子组件-》3、在components:\{\}中挂载子组件-》4、在父组件的template中使用子组件 ### 二、vue中组件间通信的方式 ### 1、父子组件 (1)父组件-》子组件传值通信:通过props传值:先在父组件绑定自定义属性,在子组件使用props接受父组件传递的参数,然后在子组件中任意使用参数。 (2)子组件-》父组件传值通信:子组件使用this.$emit('自定义事件名称',参数)给父组件传值,父组件在HTML中使用v-on的方式触发事件,可以获取到传过来的参数。 2、兄弟组件 兄弟组件可以使用vuex、bus中央事件总线($emit / $on) (1)bus中央事件总线:以一个空的vue实例作为事件总线,以此来监听和触发事件,实现任何组件间的通信。具体实现方式如下: var event = new Vue(); event.$emit('data-*',数据); event.$on('data-*',data=>{}); 3、跨级组件:vuex、bus中央事件总线($emit / $on) 4、$attrs/$listeners 、$parent/$children与ref ### 三、vue的双向数据绑定原理(v-model原理) ### vue中为表单的input事件中使用v-model指令绑定data中的属性,就可以创建数据的双向绑定,达到数据变化,视图更新,视图中由于交互操作用户输入的数据变化,data中的数据也会变化。vue是利用数据劫持 结合发布订阅者模式,通过Object.defineProperty()为这些属性添加setter/getter方法来劫持数据。另外设置一个监听器Observer,当监听到属性发生变化,就会通知订阅者watcher,watcher收到属性变化通知,就会去调用set方法进行data的更新,把数据更新到对应的节点,从而实现视图的更新。另一方面,通过编译和解析vue模板,为v-model指令对应的节点绑定@input事件,页面输入值就会被实时更新data中的值。 ### 四、vue的数据响应式原理 ### 数据响应式是当data中的数据发生变化,视图就会响应地进行更新。具体是vue实例会遍历data中的每个对象的属性,并通过Object.defineProperty()为这些属性添加setter/getter方法来进行数据劫持。每个vue组件实例都会有一个watcher,它会把接触过的数据都自动作为依赖。当setter监听到数据被访问或被修改,就会通知watcher。当watcher收到通知以后,就会去调用set方法进行data的更新,把数据更新到对应的节点,从而实现视图的更新。 ### 五、vue的MVVM模式(如何理解MVVM模式) ### MVVM是一种设计思想,可以被拆分为M、V、VM部分。M指的是Model模型,是Vue中data对象部分,用来定义数据和业务逻辑;V指的是View视图层,用来展示页面内容;VM指的是VIewModel,是连接View和Model的中间件,可以监听到Model中的数据并且控制视图的更新,处理用户操作。View和Model并无直接联系。Model和ViewModel之间是双向绑定的。当Model中的数据发生变化,ViewModel会获取到Model最新的值,View会自动渲染更新。当View中因为用户在交互操作中输入不同的值,ViewModel也会通知Model更新data中的值。这种设计模式封装了大部分的dom操作,程序员只需要关注和维护数据和业务逻辑,不需要手动操作dom,也提高了开发效率。 ### 六、如何理解前端的组件化思想 ### 根据页面的内容结构划分,页面每个独立的可视/可交互区域可视为一个组件,页面可以由多个组件构成。每个组件是由HTML、css和js整合而成的一个独立的完成的功能,可以被重复使用。组件化实现了扩展HTML元素,封装可用的代码,方便维护。 ### 七、前端的模块化(如何理解前端的模块化) ### 模块化是一种开发规范,模块就是将一个完整的单一的功能整合起来形成一个文件,可以向外部暴露方法。 模块化的好处:避免命名冲突、提高复用性、方便维护; ### 八、vue的优点(使用vue有什么优势/好处) ### 1、vue是一个轻量级的渐进式框架,压缩之后体积只有20kb 2、简单易用,上手快 3、提供了双向数据绑定和组件化视图 4、减少了dom操作,核心放在了视图层,用户只需关注数据和业务逻辑的处理,倡导数据驱动视图,通过数据来显示视图层。 ### 九、路由跳转方式 ### 声明式跳转(router-link标签)、编程式跳转(router.push()) ### 十、v-if、v-show的区别,以及它们的应用场景 ### 共同点:都是控制元素的显示与隐藏,实现条件渲染。 区别:1、v-if是条件表达式的返回值为true时才会被渲染在dom中,如果为false,则不会被渲染在dom中。而v-show是始终都会被渲染在dom中,只是简单的控制元素的display属性。 2、v-if有更高的切换开销,初次渲染开销较小。v-show有更高的初次渲染开销,切换开销较小。 应用场景:如果切换频次过高的,选择v-show。如果运行时条件很少改变的选择v-if。 ### 十一、vue常见指令 ### v-text、v-html、v-for、v-if、v-show、v-once、v-on、v-bind、v-model ### 十二、为什么组件内部的data必须是一个函数?而new Vue()实例里data是一个对象 ### 因为组件是拿来复用的,js对象又是引用关系,当data是函数时,因为每个组件实例可以维护一份被返回对象的独立的拷贝,这样组件之间的data属性值不会互相影响,隔离了作用域。 ### 十三、vue中key的作用 ### 1、使用key可以高效地更新虚拟dom,对比新旧nodes,识别vnodes。 2、方便跟踪每个节点的身份,从而重用和重新排序现有元素。 ### 十四、vue的生命周期 ### 每个组件都有自己的生命周期,生命周期是从创建、数据初始化、挂载、更新、到销毁的这个过程。 事件执行顺序为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。 beforeCreated里获取不到$el、$data和data中的值 created里可以获取到$data和data中的数据,但是获取不到$el的值(还未被挂载) mounted里可以获取到$el的值(已挂载到实例上,渲染完成,可以进行dom) ### 十五、watch、computed以及应用场景 ### watch:侦听器,监听数据,每当数据发生变化都会执行回调进行后续操作 computed:是计算属性,处理比较复杂的业务逻辑。依赖于其他属性值,基于响应式依赖来进行缓存。只有当它依赖的属性值发生变化,computed才会重新计算。如果依赖的属性值没有重新发生变化,多次访问计算属性会返回之前的结果,不会执行方法。 应用场景:如果是比较复杂的业务逻辑,需要依赖其他属性值来计算的就用computed。当需要在数据变化时执行异步方法或开销较大时就用watch。
还没有评论,来说两句吧...