vue每日一问(9)

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

一。vue3有了解过吗？能说说跟vue2的区别吗？

• 速度更快

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

• 体积更小

  • 通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的能够tree-shaking，有两大好处：

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

• 更易维护

  • compositon Api

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

  • 更好的Typescript支持

    • VUE3是基于typescipt编写的，可以享受到自动的类型定义提示

  • 编译器重写

Vue3新增特性：

• framents

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

• Teleport

  • Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，让结构不再受组件限制

• composition Api

  • composition Api，也就是组合式api，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理

非兼容变更：

• 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

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