vue这个面试题你真的扛得住吗?

Vue3 和 Vue2 的区别

考点

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

答案

Vue3 的优点

1. 速度更快

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

    2. 体积更小

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

    3. 更易维护

  • compositon Api 可与现有的 Options API 一起使用。

  • 灵活的逻辑组合与复用。

  • Vue3 模块可以和其他框架搭配使用。

    4. 更接近原生

  • 可以自定义渲染 API 。

    更易使用

  • 响应式 Api 暴露出来。
    图片说明

  • 轻松识别组件重新渲染原因。

    Vue3 新增特性

  • Vue3 中需要关注的一些新功能:

    • framents
    • Teleport
    • composition
    • createRenderer

      framents

  • 在 Vue3.x 中,组件现在支持有多个根节点。

    <!-- Layout.vue -->
    <template>
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
    </template>

    Teleport

  • Teleport 是一种能够将我们的模板移动到 DOMVue app 之外的其他位置的技术,就有点像哆啦A梦的“任意门”。

  • vue2 中,像 modalstoast 等这样的元素,如果我们嵌套在 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-ifv-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 应始终声明为函数。

  • 来自 mixindata 选项现在可简单地合并

  • 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,`once` 实例方法。

  • 过滤 filter

  • 内联模板 attribute

  • $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。

    扩展

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

  • 对开发人员:能够使用 vue 开发出更多其他的功能,而不必担忧整体体积过大。

  • 对使用者:打包出来的包体积变小了。

#面试题目##前端#
全部评论
vue是不是很难
点赞 回复 分享
发布于 2022-08-26 21:46 河北
加油,无惧流言,肆意奔跑
点赞 回复 分享
发布于 2022-08-26 20:51 湖南
学到了,感谢分享,这个很有用
点赞 回复 分享
发布于 2022-08-21 20:48 陕西

相关推荐

怎么起名字:早知道就不读书了,害得我送外卖还得扶眼镜
点赞 评论 收藏
分享
码农索隆:想看offer细节
点赞 评论 收藏
分享
评论
7
24
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务