vue3.0与vue2.0的区别

vue3跟vue2的区别

• vue3：简要来说就是利用新的语言特性（es6），解决架构问题

• vue3的新特性：

  • 速度更快
    • vue3相比vue2
    • 重写了虚拟dom的实现
    • 编译模板的优化
    • 更高效的组件初始化
    • undate性能提高1.3-2倍
    • SSR速度提高了2-3倍
  • 体积减少
    • 通过webpack的tree-shaking功能，可以将无用模块‘剪辑’，仅打包需要的，有两大好处：
      • 对开发人员，能够对vue实现更多其它的功能，而不必担忧整体体积过大
      • 对使用者，打包出来的包体积变小了
  • 更易维护
    • composition Api
    • 可与现有的options Api一起使用
    • 灵活的逻辑组合与复用
    • vue3模块可以和其他框架搭配使用
    • 更好的Typescript支持：vue3是基于typeScript编写的，可以享受到自动的类型定义提示
  • 更接近原生
    • 可以自定义渲染API
  • 更易使用
    • 响应式API暴露出来，轻松识别组件重新渲染原因

• vue3新增特性

  • vue3需要关注的一些新功能包括：

    • framents

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

    • Teleport

      • Teleport是一种能够将我们的模板移动到DOM中Vue app之外的其他位置的技术，
      • 在vue2中，像modals,toast等这样的元素，如果我们嵌套在vue的某个组件内部，那么处理嵌套组件的定位，z-index和样式就会变得很困难，通过Teleport,我们可以在组件的逻辑位置写模板代码，然后在vue应用范围之外渲染它

    • composition API

      • composition Api，也就是组合式api，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理(可以更方便的抽取共通逻辑，但是不要过于在意逻辑代码复用，以功能提取代码也是一种思路)

    • createRenderer

      • 通过createRenderer，我们能够构建自定义渲染器，我们能够将 vue 的开发模型扩展到其他平台

        我们可以将其生成在canvas画布上

• 非兼容变更

  • Global API

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

  • 模板指令

    • 组件上v-model用法已更改

    • 和非v-for节点上key用法已更改

    • 在同一元素上使用的v-if和v-for优先级已更改

    • v-bind='object’现在排序敏感

    • v-for的ref不再注册ref数组

  • 组件

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

  • 渲染函数

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

• 其他小改变

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

• 移除API

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