2023前端面试题大全(VUE)

Vue.js 面试题大全 本文档将对 Vue.js 进行了详细的介绍，涵盖了 MVVM 框架、Vue2 和 Vue3 的区别、生命周期、模板语法、插槽用法、过滤器等知识点。 MVVM 框架 MVVM 框架是模型视图视图模型（Model-View-ViewModel）的缩写，主要由三部分组成：Model、View 和 ViewModel。 * Model：代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。 * View：代表 UI 组件，它负责将数据模型转化成 UI 展现出来。 * ViewModel：监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View。 Vue2 和 Vue3 的区别 Vue2 和 Vue3 是两个不同的版本，具有不同的编程风格和特点。 * 写法上的区别：Vue2 使用的是 options（选项）Api，Vue3 的是 composition Api（当然 Vue3 也兼容 composition api）。options Api 中 methods、compute、data 等 api 都是分散的。而 composition api 中的代码是根据逻辑功能来组织的，我们可以将一个功能所定义的 methods、compute、data 等 api 会放在一起，让我们可以更灵活地组合组件逻辑。 * 响应式实现方式：Vue2 中是通过 Object.defineProperty 对数据劫持实现的，Vue3 中则是使用 Proxy 对数据代理实现的。 * 生命周期区别：Vue3 中将 beforeCreate 和 created 合并到了 setup 函数中。 * 根节点：Vue3 组件允许多个根节点，而 Vue2 只允许一个。 * 内置组件：Vue3 新增了传送组件 Teleport 和异步依赖处理组件 Suspense。 模板语法 * v-if 和 v-show：v-if 表示一个 dom 元素是否被创建，而 v-show 则是控制这个 dom 元素的 display 属性是否为 none。一般在频繁切换状态的地方使用 v-show，v-if 则更适合条件不经常改变的场景，因为它切换开销相对较大。 * v-for 和 v-if 优先级：开发过程中一般不建议同时将 v-for 和 v-if 放在一个标签中使用。在 Vue2 中 v-for 的优先级会更高，所以会先执行循环，再进行 v-if 判断，所以这样就会导致无论需不需展示这个元素，都会先遍历整个列表。在 Vue3 中 v-if 的优先级会更高，但是当我们遍历一个数组的时候，根据数组中的某个元素进行 v-if 判断的时候就会报错，因为 v-if 会先执行此时还没有拿到这个数组。 插槽用法 插槽可以理解为占坑，当使用一个组件的时候，在组件标签里的对应的内容就会替换掉这个组件中的 slot 标签。插槽分为默认插槽、具名插槽、作用域插槽。 * 默认插槽：子组件中用 slot 标签来确定渲染位置，父组件使用它时直接在子组件的标签内写入内容即可。 * 具名插槽：子组件中可以用 name 熟悉对 slot 命名，父组件在使用的时候通过 template 中的 v-slot:name 或者#name 来定义这个插槽中的内容。 * 作用域插槽：子组件中的 slot 可以通过类似组件属性传递的方式将子组件的值传递给父组件中这个子组件的插槽内容中（子组件标签内），在父组件使用子组件的时候要用 v-slot 的值进行接收这些参数，默认插槽可以将其直接写在子组件标签上，具名插槽则写在 template 上。 过滤器 过滤器是用来过滤数据的，在 Vue 中使用 filters 来过滤数据，filters 不会修改数据，而是过滤数据，改变用户看到的输出。使用场景： * 需要格式化数据的情况，比如需要处理时间、价格等数据格式的输出 / 显示。 * 后端返回一个 年月日的日期字符串，前端需要展示为 多少天前 的数据格式，此时就可以用 filters 过滤器来处理数据。 过滤器是一个函数，它会把表达式中的值始终当作函数的第一个参数。过滤器用在插值表达式 {{ }} 和 v-bind 表达式 中，然后放在操作符“ | ”后面进行指示。