2022年Vue最常见的面试题以及填空题（面试必问）.pdfVIP

2022年Vue最常见的⾯试题以及填空题 （⾯试必问） ******⼀、**computed 和 watch 的区别 computed： 计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发⽣改变，下⼀次获取 computed 的值 时才会重新计算 computed 的值 ； watch： 更多的 “观察”的作⽤，类似于某些数据的监听回调，每当监听的数据变化时都会执⾏回调进⾏后续操作 ； ******⼆、**vue-router 路由模式有⼏种？ vue-router 有 3 种路由模式：hash、history、abstract 各模式的说明如下 ： hash: 使⽤ URL hash 值来作路由。⽀持所有浏览器，包括不⽀持 HTML5 History Api 的浏览器 ； history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式； abstract : ⽀持所有 JavaScript 运⾏环境，如 Node.j s 服务器端。如果发现没有浏览器的 API，路由会 ⾃动强制进⼊这个模式. 三、vue中为什么data ⼀个函数**** 组件的data写成⼀个函数，数据以函数返回值形式定义，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私 有的数据空间，让各个组件实例维护各 ⾃的数据。如果单纯的写成对象形式，就使得所有组件实例共⽤了⼀份data，这样⼀个实例中更新数 据会导致其他实例数据改变。 ******四、**v-if 和 v-show 的区别 v-if 在编译过程中会被转化成三元表达式，条件不满⾜时不渲染此节点。 v-show 会被编译成指令，条件不满⾜时控制样式将此节点隐藏 五、请列举⼏个vue内部指令，并说明其作⽤(⾄少五个**)****** 1. v-bind：绑定属性，动态更新HTML元素上的属性。例如 v-bind:class ； 2. v-on：⽤于监听DOM事件。例如 v-on:click v-on:keyup； 3. v-text ：更新元素的textContent ； 4. v-model ：⽤来在input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，⾃动更新绑定 的元素的值 ； 5. v-for：循环指令编译出来的结果 -L 代表渲染列表。优先级⽐v-if⾼最好不要⼀起使⽤，尽量使⽤计算属性去解决 ； 6. v-show ：使⽤指令来实现 – 最终会通过display来进⾏显⽰隐藏 ； 六、你建不建议v-if和v-for⼀起使⽤？为什么？ v-for和v-if不要在同⼀标签中使⽤，因为解析时先解析v-for在解析v-if。如果遇到需要同时使⽤时可以考虑写成计算属性的⽅式。 ******七、**v-for为什么要加key v-for遍历时，key Vue中vnode的唯⼀标记，通过这个 key ，我们的 diff 操作可以更准确、更快速。 更准确 因为带key时，在sameNode函数进⾏key值对⽐中可以避免就地复⽤的情况。所以会更加准确。 更快速 利⽤key 的唯⼀性⽣成 map 对象来获取对应节点，⽐遍历⽅式更快 ⼋、填空题 1. MVVM中的的Model表⽰页⾯中的数据和视图中间的调度者 ； 2. MVVM中的的View表⽰页⾯中的视图 3. VUE中可以使⽤DOM操作了; 4. 在HTML中被Vue实例控制的代码区域我们称之为View 5. 在Vue实例中的Data对象就 MVVM中的Model 6. new出来的Vue实例就 MVVM中的ViewModel 7. v-text指令 ⽤来渲染⽂本的; 8. v-html指令 ⽤来渲染HTML标签; 9. v-bind指令 ⽤来给HTML属性绑定数据的; 10. v-bind的简写 : 11. v-on指令 给元素绑定事件的; 12. 给⼀个div添加⼀个点击事件可以使⽤指令@; 13. 在methods⾥的⽅法中想访问data⾥的数据可以使⽤this关键字; 14. v-html指令相当于j s中的innserHTML属性; 15. VUE中v-for指令可以⽤来做循环; 16. 当我们频繁的操作显⽰和隐藏元素的时v-show更好; 17. v-else⼀般