vue面试题和项目中遇到的坑

写在前面

之前有提到&＃xff0c;在经历了前端转型之后&＃xff0c;一场技术变革的到来&＃xff0c;小程序&＃xff0c;h5移动端&＃xff0c;对性能优化的要求越来越高&＃xff0c;受面向对象思想编程方式的影响&＃xff0c;前端现在主流的技术框架就是Vue,React,Angular.他们的数据驱动模式&＃xff0c;MVVM模式&＃xff0c;很受欢迎&＃xff0c;这种spa单页面应用&＃xff0c;组件思维对一个庞大的web应用很有帮助提升加载速度&＃xff0c;减少Dom操作&＃xff0c;随之而来的也就是不断地学习&＃xff0c;对技术员的技术要求也开始偏向于vue,小程序&＃xff0c;公众号&＃xff0c;由于智能手机的普及&＃xff0c;app端比网页更受欢迎&＃xff0c;所以就要不断地学习新的知识&＃xff0c;否则会被淘汰。

vue3.0的响应式原理已经更新&＃xff0c;详情请移步vue2.0和3.0的响应式原理以及区别 

在面试的时候肯定免不了被问到其他知识点例如es6,Javascript,css3我也总结出来了&＃xff0c;详情请移步

es6语法的知识点和面试题总结

前端面试题总结以及一些面试心得

微信小程序的面试题以及项目中遇到的坑

一&＃xff0c;谈谈你对MVVM 的理解&＃xff1f;

MVVM 由 Model,View,ViewModel 三部分构成&＃xff0c;Model 层代表数据模型&＃xff0c;也可以在Model中定义数据修改和操作的业务逻辑&＃xff1b;View 代表UI 组件&＃xff0c;它负责将数据模型转化成UI 展现出来&＃xff0c;ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下&＃xff0c;View 和 Model 之间并没有直接的联系&＃xff0c;而是通过ViewModel进行交互&＃xff0c;Model 和 ViewModel 之间的交互是双向的&＃xff0c; 因此View 数据的变化会同步到Model中&＃xff0c;而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来&＃xff0c;而View 和 Model 之间的同步工作完全是自动的&＃xff0c;无需人为干涉&＃xff0c;因此开发者只需关注业务逻辑&＃xff0c;不需要手动操作DOM, 不需要关注数据状态的同步问题&＃xff0c;复杂的数据状态维护完全由 MVVM 来统一管理。

二&＃xff0c;vue路由传参的方式

• router.js 后边跟:id配置参数
• query 方法传参
• name 方法传参
• vue自带标签标签传参
• 详情请看Vue $router 路由传参的3种方法详解

三&＃xff0c;vue组件之间的传参

• 父传子 props
• 子传父 this.$emit
• 非父子组件 eventHub 中转站 this.$on
• vuex state 存的变量&＃xff0c;mutations改变的状态 actions 触发的行为&＃xff08;方法&＃xff09;
  组件传参具体的传参请参考vue2.0父子组件以及非父子组件通信传参详解
  vuex stroe 具体的请参考vuex原理&＃xff0c;用法踩坑小计

四&＃xff0c;vue-router有哪几种导航钩子&＃xff1f;

• 第一种是全局导航钩子&＃xff08;全局守卫&＃xff09;&＃xff1a;router.beforeEach(to,from,next)&＃xff0c;作用&＃xff1a;跳转前进行判断拦截。
• 第 二种&＃xff1a;全局解析守卫router.beforeResolve,在导航被确认前&＃xff0c;所有组件内守卫和异步路由组件被解析之后&＃xff0c;解析守卫就被调用。&＃xff08;2.5.0新增&＃xff09;。
• 第三种&＃xff1a;单独路由独享的守卫beforeEnter,在路由配置时定义&＃xff0c;与全局守卫的方法是一样的。
• 第四种&＃xff1a;组件内的守卫。直接在路由组件内定义守卫&＃xff0c;
  以下为官网文档的介绍&＃xff1a;

beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不&＃xff01;能&＃xff01;获取组件实例 &＃96;this&＃96;// 因为当守卫执行前&＃xff0c;组件实例还没被创建},beforeRouteUpdate (to, from, next) {// 在当前路由改变&＃xff0c;但是该组件被复用时调用// 举例来说&＃xff0c;对于一个带有动态参数的路径 /foo/:id&＃xff0c;在 /foo/1 和 /foo/2 之间跳转的时候&＃xff0c;// 由于会渲染同样的 Foo 组件&＃xff0c;因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 &＃96;this&＃96;},beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 &＃96;this&＃96;}

五&＃xff0c;请写出几种常用的vue指令 

v-once、v-for、v-if、v-show、v-on,v-model

六&＃xff0c;请详细解释一下vue(2.0)的生命周期&＃xff1f;

七&＃xff0c;slot是什么&＃xff1f;并说一下详细的用法&＃xff1f;

这里边都是vue2.0的slot插槽的知识。3.0更新了

vue官网解释&＃xff1a;slot 插槽&＃xff0c;-------&＃xff08;Vue 实现了一套内容分发的 API&＃xff0c;这套 API 基于当前的 Web Components 规范草案&＃xff0c;将 元素作为承载分发内容的出口。
&＃xff09;是不是看完稀里糊涂的&＃xff0c;反正我是稀里糊涂的&＃xff0c;再来说说我自己的理解:
slot就是为了实现真正的灵活的单页组件&＃xff0c;在组件外部灵活控制组件内部的内容一种形式或者是入口&＃xff0c;就是将组件内所需要的内容以插槽&＃xff08;slot&＃xff09;的形式插入到公共组件中&＃xff0c;以达到灵活控制。
当组件渲染的时候&＃xff0c;这个 元素将会被替换为“Your Profile”。插槽内可以包含任何模板代码&＃xff0c;包括 HTML&＃xff1a;详情请看vue 带动画效果的NavBar这里边有详细介绍到的使用方法。

这里边是3.0的slot插槽的内容 

1, vue 3.0将插槽当做了一个标签
2, 定义一个插槽