VUE面试必备题(含答案)

VUE 面试必备题解析 生命周期 VUE 的生命周期包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 八个阶段。在这八个阶段中，可以进行不同的操作，如数据请求、加载动画、数据更新等。 * beforeCreate：创建之前，无法获取响应数据 * created：创建之后，可以在这加个 loading 事件和进行数据请求 * beforeMount：挂载前，在这结束 loading，还做一些初始数据的获取，实现函数自执行 * mounted：挂载后，在这发起后端请求，拿回数据，配合路由钩子做一些事情 * beforeUpdate：数据更新之前 * updated：数据更新完成之后 * beforeDestroy：销毁之前，你确认删除 XX 吗？或者确认退出吗？ * destroyed：销毁之后，当前组件已被删除，清空相关内容，在这获取不到 dom 了 组件通信 VUE 中有多种组件通信的方式，包括父传子、子传父、同级传等。 * 父传子：props、$attrs/$listeners、$children、$root、provide/inject、$refs * 子传父：$emit、$parent * 同级传：eventBus、vuex 页面通信 VUE 中有多种页面通信的方式，包括 url 拼接参数、query 传参、params 传参、动态路由传参等。 * url 拼接参数："/a?a1=a1"，接收页面：this.$route.query.a1 * query 传参：{path: 'a', query: {a2:'a2'}}，接收页面：this.$route.query.a2 * params 传参：{name: 'a', params: {a3:'a3'}}，接收页面：this.$route.params.a3 * 动态路由传参：/path/a4，接收页面：this.$route.params.id，路由：path: "/a/:id" $set $set 是 VUE 中的一个方法，当数据变化但没有更新视图时使用，例如对象新增加的属性，数组新增加的成员。this.$set(obj,"key","value") $nextTick $nextTick 是 VUE 中的一个方法，在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。例如：在 created 生命周期中想要操作 dom 就可以使用this.$nextTick(()=>{ ... }) mixin mixin 是 VUE 中的一个功能，提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 MVVM MVVM 是 Model-View-ViewModel 的缩写。Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View。 watch 和 computed watch 和 computed 是 VUE 中两个不同的概念。watch 只能监听 data 中的数据变化，computed 不需要。watch 可以进行异步操作，computed 不可以。computed 不修改原始数据，通过 return 返回处理的数据，可以包含大量的逻辑运算。 v-if 和 v-show v-if 和 v-show 是 VUE 中两个不同的指令。v-if 是条件渲染，条件为真，元素将会被渲染，条件为假，元素会被销毁。v-show 只是简单的控制元素的 display 属性。