快捷搜索:

想要刚毕业就月入过万必须要懂这些面试题(Vue 篇)

写在前面

话题挑战赛第1期

    活动详情地址: 参赛话题:前端面试宝典 话题描述:欢迎各位加入话题创作得小伙伴,如果我没有猜错得话,我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重,已经成为不可缺少的部分,前端技术也是层出不穷,各种技术类、技术框架也蜂拥而出,前端面试的难度也随之增加,如果我们拥有一套前端面试宝典。如果你是应聘者:你就可以从容的solo面试官,如果你是面试官:你就可以将应聘者拷问到骨子里! 总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此,形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧!!! 创作模板:

Vue3 和 Vue2 的区别

考点

    Vue3 和 Vue2 的介绍 Vue3 新增特性 Vue3 的优缺点 Vue2 的优缺点 Vue3 相对于Vue2 的非兼容性变更

答案

Vue3 的优点

1. 速度更快

    Vue3 相比 Vue2 来说,Vue3 重写了虚拟 Dom 实现,编译模板的优化,更高效的组件初始化,undate性能提高 1.3 ~ 2 倍,SSR 速度提高了 2 ~ 3 倍。

2. 体积更小

    通过 webpack 的 tree-shaking 功能,可以将无用模块“剪辑”,仅打包需要的模块。

3. 更易维护

    compositon Api 可与现有的 Options API 一起使用。 灵活的逻辑组合与复用。 Vue3 模块可以和其他框架搭配使用。

4. 更接近原生

    可以自定义渲染 API 。

更易使用

    响应式 Api 暴露出来。 轻松识别组件重新渲染原因。

Vue3 新增特性

framents

    在 Vue3.x 中,组件现在支持有多个根节点。
<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Teleport

    Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术,就有点像哆啦A梦的“任意门”。 在 vue2 中,像 modals,toast 等这样的元素,如果我们嵌套在 Vue 的某个组件内部,那么处理嵌套组件的定位、z-index 和样式就会变得很困难。 通过 Teleport ,我们可以在组件的逻辑位置写模板代码,然后在 Vue 应用范围之外渲染它。 <button @click="showToast" class="btn">打开 toast</button> <!-- to 属性就是目标位置 --> <teleport to="#teleport-target"> <div v-if="visible" class="toast-wrap"> <div class="toast-msg">我是一个 Toast 文案</div> </div> </teleport>

createRenderer

    通过 createRenderer ,我们能够构建自定义渲染器,我们能够将 vue 的开发模型扩展到其他平台。 我们可以将其生成在 canvas 画布上。 了解 createRenderer 的基本使用。 import { createRenderer } from @vue/runtime-core const { render, createApp } = createRenderer({ patchProp, insert, remove, createElement, // ... }) export { render, createApp } export * from @vue/runtime-core

composition Api

    composition Api,也就是组合式 API,通过这种形式,我们能够更加容易维护我们的代码,将相同功能的变量进行一个集中式的管理。 composition Api 的使用: composition Api 的简单使用: export default { setup() { const count = ref(0) const double = computed(() => count.value * 2) function increment() { count.value++ } onMounted(() => console.log(component mounted!)) return { count, double, increment } } }

非兼容性变更

Global API

    全局 Vue API 已更改为使用应用程序实例。 全局和内部 API 已经被重构为可 tree-shakable 。

模板指令

    组件上 v-model 用法已更改。 <template v-for> 和 非 v-for 节点上 key 用法已更改。 在同一元素上使用的 v-if 和 v-for 优先级已更改。 *v-bind="object" 现在排序敏感。 v-for 中的 ref 不再注册 ref 数组 。

组件

    只能使用普通函数创建功能组件。 functional 属性在单文件组件 (SFC) 。 异步组件现在需要 defineAsyncComponent 方法来创建。

渲染函数

    渲染函数 API 改变。 $scopedSlots property 已删除,所有插槽都通过 $slots 作为函数暴露。 自定义指令 API 已更改为与组件生命周期一致。 一些转换 class 被重命名了: v-enter -> v-enter-from。 v-leave -> v-leave-from。 组件 watch 选项和实例方法 $watch 不再支持点分隔字符串路径,请改用计算函数作为参数。 在 Vue 2.x 中,应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项,则最终编译为模板)。Vue3.x 现在使用应用程序容器的 innerHTML。

其他小改变

    destroyed 生命周期选项被重命名为 onUnmounted。 beforeDestroy 生命周期选项被重命名为 onBeforeUnmount。 [prop default 工厂函数不再有权访问 this 是上下文。 自定义指令 API 已更改为与组件生命周期一致。 data 应始终声明为函数。 来自 mixin 的 data 选项现在可简单地合并。 attribute 强制策略已更改。 一些过渡 class 被重命名。 组建 watch 选项和实例方法 $watch 不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。 <template> 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 现在被视为普通元素,并将生成原生的 <template> 元素,而不是渲染其内部内容。 在 Vue 2.x 中,应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项,则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML,这意味着容器本身不再被视为模板的一部分。

移除 API

    keyCode 支持作为 v-on 的修饰符。 $on,$off 和 $once 实例方法。 过滤 filter 。 内联模板 attribute 。 $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。

扩展

能够使用 webpack 的 tree-shaking 有什么好处?

    对开发人员:能够使用 vue 开发出更多其他的功能,而不必担忧整体体积过大。 对使用者:打包出来的包体积变小了。

写在最后

话题挑战赛第1期

    活动详情地址:
经验分享 程序员 职场和发展