前端vue经典面试题78道（重点详细简洁）.pdf

前端vue经典⾯试题78道（重点详细简洁） ⽬录 1.⾃我介绍 2分钟，200-300个字，主旨⾃⼰基本情况，⼯作经历，优点，兴趣爱好，职业规划，邀约 2.vue⾯试题 1.v-show和v-if区别的区别： v-show通过css display控制显⽰和隐藏，v-if组件真正的渲染和销毁，⽽不是显⽰和隐藏，频繁切换状态使⽤v-show 否则v-if 2.为何v-for要⽤key 快速查找到节点，减少渲染次数，提升渲染性能 3.描述vue组件声明周期mm 单组件声明周期图 挂载： beforeCreate = created = beforeMount = mounted 更新： beforeUpdate = updated 销毁： beforeDestroy = destroyed ⽗⼦组件⽣命周期图 挂载： parent beforeCreate = parent created = parent beforeMount = child beforeCreate = child created = child beforeMount = child mounted = parent mounted 更新： parent beforeUpdate = child beforeUpdate = child updated = parent updated 销毁： parent beforeDestroy = child beforeDestroy = child destroyed = parent destroyed 从以上能够看出： 挂载时，⼦组件是在⽗组件before mount后开始挂载，并且⼦组件先mounted，⽗组件随后 更新时，⼦组件是在⽗组件before update后开始更新，⼦组件先于⽗组件更新 销毁时，⼦组件是在⽗组件before destroy后开始销毁，并且是⼦组件先销毁，⽗组件随后。 4.vue组件如何通信 1.⽗⼦组件props和this.$emit 2.ref 链：⽗组件要给⼦组件传值，在⼦组件上定义⼀个 ref 属性，这样通过⽗组件的 $refs 属性就可以获取⼦组件的值了，也可以进⾏⽗ ⼦，兄弟之间的传值($parent / $children与 ref类似) 3.事件总线bus：使⽤⼀个 空的 VUE 实例作为事件总线，⾃定义事件event.$on event.$off event.$emit 4 provide inject组件通信 5.vuex 6.$attrs和$listeners 仅仅是传递数据，⽽不做中间处理，$attrs ⾥存放的是⽗组件中绑定的⾮ Props 属性，$listeners⾥存放的是⽗组 件中绑定的⾮原⽣事件。 常见使⽤场景可以分为三类： ⽗⼦通信： ⽗向⼦传递数据是通过 props，⼦向⽗是通过 events（$emit）； 通过⽗链 / ⼦链也可以通信（$parent / $children）； ref 也可以访问组件实例； provide / inject API； $attrs/$listeners vuex 兄弟通信： 事件总线Bus； Vuex 跨级通信： 事件总线Bus； Vuex； provide / inject API $attrs/$listeners 5.描述组件渲染和更新的过程 1、vue 组件初次渲染过程 解析模板为 render 函数 触发响应式，监听 data 属性的 getter 和 setter 执⾏ render 函数， ⽣成 vnode，patch(elem,vnode) 2、vue 组件更新过程 修改 data， 触发 setter （此前在getter中已被监听） 重新执⾏ render 函数，⽣成 newVnode，patch(vnode, newVnode) 6.双向数据绑定v-model的实现原理 双向数据绑定最核⼼的⽅法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的⽬的. 先是从data⾥⾯的数据msg通过绑定到input控件和p标签上。然后input上通过v-on:input监听控件，触发change()。 调⽤⽅法都可以默认获取e事件，e.target.value是获取调⽤该⽅法的DOM对象的value值。把value值在赋给data⾥的msg，就是实现了双 向数据绑定的原理了。 7.对mvvm的理解 m-model,v-view,vm-viewModel。dom通过监听事件操作vu