zoukankan      html  css  js  c++  java
  • vue 3.x 相对于 vue 2.x 的重大修改

    组件钩子函数

    自定义指令

    • API 已重命名,以便更好地与组件生命周期保持一致
    • 自定义指令将由子组件通过 v-bind="$attrs"

     

    v-for 中的 Ref 数组

    Vue 2 中,在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。
    Vue 3 中,这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref,请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)
     

    Data 选项

    2.x :data 选项是 object 或者是 function

    3.x :data 选项已标准化为只接受返回 object 的 function

    Mixin 合并行为变更

    事件 API

    2.x 语法

    2.x 中,Vue 实例可用于触发通过事件触发 API 强制附加的处理程序 ($on$off 和 $once),这用于创建 event hub,以创建在整个应用程序中使用的全局事件侦听器

     

    3.x 更新

    移除 $on$off 和 $once 方法,$emit 仍然是现有 API 的一部分,因为它用于触发由父组件以声明方式附加的事件处理程序

    可以通过使用实现事件发射器接口的外部库来替换现有的 event hub mitt

    过滤器(removed

    Filters 已从 Vue 3.0 中删除,不再受支持(建议用方法调用或计算属性替换它们)

    片段

    2.x 中,不支持多根组件,当用户意外创建多根组件时会发出警告,因此,为了修复此错误,许多组件被包装在一个 <div> 中;

    3.x 中,组件现在可以有多个根节点!但是,这确实要求开发者明确定义属性应该分布在哪里

    功能组件

     在 Vue 2 中,功能组件有两个主要用例:
      • 作为性能优化,因为它们的初始化速度比有状态组件快得多
      • 返回多个根节点

    全局 API

    2.x 语法

    Vue.nextTick() 是一个全局的 API 直接暴露在单个 Vue 对象上——事实上,实例方法 $nextTick() 只是一个方便的包装 Vue.nextTick() 为方便起见,回调的 this 上下文自动绑定到当前当前实例

    3.x 语法

    key attribute

     

     

    渲染函数 API

    VNode Props 格式化

    Slot 统一

    • this.$slots 现在将 slots 作为函数公开
    • BREAKING:移除 this.$scopedSlots

    过渡的 class 名更改

     过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from

     

    v-model

    • prop 和事件默认名称已更改

      

    • sync 修饰符和组件的 model 选项已移除,可用 v-model 作为代替

    • NEW:现在可以在同一个组件上使用多个 v-model 进行双向绑定
    • NEW:现在可以自定义 v-model 修饰符

      

     

    v-if 与 v-for 的优先级对比

     

    v-bind 合并策略

     

     

  • 相关阅读:
    python中int类型、bool类型补充,及字符串的部分常用方法
    while循环、流程控制、基本运算符、编码问题、in和not in
    python的起源、解释器、变量用户交互、流程控制
    Spring-Security (学习记录三)--读取数据库中的用户和角色
    Spring-Security (学习记录二)--修改为自己的登录页面
    java中get请求的中文乱码问题
    python打开文件的方式
    js闭包
    Java内部类的整理。
    HTML+CSS标签的属性及应用
  • 原文地址:https://www.cnblogs.com/vs1435/p/13784516.html
Copyright © 2011-2022 走看看