请选择 进入手机版 | 继续访问电脑版

升级方案

[复制链接]
来自北方 发表于 2021-1-1 17:45:44 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
升级方案



升级前

模版


  • 排查同时使用 v-if 和 v-for 的元素,制止在同一个元素上同时使用,可以通过 computed 方式过滤出可见元素的列表;
  • 排查元素 v-bind 的前后使用,确保 v-bind 先界说,再界说各个属性;
  • 排查 v-for 中使用 ref 的地方,将 ref 绑定为一个函数;
渲染函数


  • 排查所有 this.$scopedSlots 更改为 this.$slots;
  • 全局搜索使用 slot-scope 的地方改为 v-slot ;
其他改动


  • 排查所有的组件中的 data 范例,确保 data 必须是返回 object 的 function ;
  • 排查所有使用 mixin 或 extend 的组件,确保 data 中的属性不重复,或者都为顶级属性;
  • 排查所有的 watch 的参数,如果监听参数为数组,需要设置 deep: true ;
移除 API


  • 排查使用数字 (即键码) 作为 v-on 的修饰符,更改为别名的方式 参照。示例:
  1. vue2v-on:keyup.112vue3v-on:keyup.delete
复制代码

  • 移除 config.keyCodes ;
  • 排查使用 keyCode ,发起转换为对应的 kebab-cased (短横线) 定名 参照
  • 全局搜索 filters ,更改为使用 computed 或 function 取代 filters ;对于使用较多场景的 filters 可以思量使用全局的 filters 示例:
  1. // main.jsconst app = createApp(App)app.config.globalProperties.$filters = {  currencyUSD(value) {    return '$' + value  }}// vue组件  [size=6]Bank Account Balance[/size]
  2.   {{ $filters.currencyUSD(accountBalance) }}
复制代码

  • 全局搜索 inline-template ,移除 inline-template 标识,如果必须使用可用 <script> 或者默认 Slot;
  • 全局搜索 $children ,移除 $children 实例,如果需要访问子组件实例可用 $refs ;
  • 全局搜索 $destroy ,移除 $destroy 实例,不应该手动管理单个 Vue 组件的生命周期;
升级中

全局


  • 排查 vue 实例创建方式,将 new Vue() 更改为 createApp ;
2.x Global API3.x Instance API (app)Vue.configapp.configVue.config.productionTipremoved ( see link )Vue.config.ignoredElementsapp.config.isCustomElement ( see link )Vue.componentapp.componentVue.directiveapp.directiveVue.mixinapp.mixinVue.useapp.use ( see link)

  • 排查使用的全局 API 更改为 ES 模块;

    • Vue.nextTick
    • Vue.observable(更改为Vue.reactive)
    • Vue.version
    • Vue.h
    • Vue.compile(仅完整版本)
    • Vue.set(仅在兼容版本中)
    • Vue.delete(仅在兼容版本中)

模版


  • 排查没有修饰符的 v-model,分别将 prop 和 event 定名更改为 modelValue 和 update:modelValue;
  • 全局搜索.native,移除 v-on 的 .native 修饰符,将需要举行参数校验的 emit 写入 emits 中;
  • 移除没有指令的 ,vue3 支持多个节点返回;
  • 全局搜索 .sync,将元素中 v-model.sync 更改为 v-model:value;
组件


  • 排查函数式组件,移除设置中 { functional: true } 和模板中  的 functional;
  • 排查单文件 SFC,props 重定名为 $props,attrs 重定名为 $attrs;
  • 排查路由和异步组件,异步组件通过 defineAsyncComponent 方法创建;
  • 排查 defineAsyncComponent ,defineAsyncComponent 中 component 选项需要改成 loader ,同时 loader 函数移除了 resolve 和 reject 参数,必须手动返回 Promise ;
渲染函数


  • 排查所有使用 render 的组件,更改 VNode domProps 布局 参照
  • 全局搜索 $listeners ,删除所有的 $listeners;
  • 排查所有设置了 { inheritAttrs: false } 的组件,确保升级后的样式是否正确。如果之前依赖 class 和 style 。Vue3 中 $attrs 包罗了所有的 attribute 包罗 class 和 style ,这些 attribute Vue2 版本中 class 和 style 则不会;
  • 全局搜索 v-enter 替换为 v-enter-from ,类名重定名;
  • 全局搜索 v-leave 替换为 v-leave-from ,类名重定名;
  • 排查 watch 和 $watch ,watch 不再支持点分隔字符串路径。如 user.userName 可以将监听的参数更改为 computed ;
  • 排查使用到 outerHTML 的组件,在 Vue2 中,应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项,则最终编译为模板)。Vue3 现在使用应用步调容器的 innerHTML ,容器自己不再被视为模板的一部门;
生命周期

vue2vue3vue3 setupbeforeCreatebeforeCreatesetup() 内部createdcreatedsetup() 内部beforeMountbeforeMountonBeforeMountmountedmountedonMountedbeforeUpdatebeforeUpdateonBeforeUpdateupdatedupdatedonUpdatedbeforeDestroybeforeUnmountonBeforeUnmountdestroyedunmountedonUnmountederrorCapturederrorCapturedonErrorCapturedrenderTrackedonRenderTrackedrenderTriggeredonRenderTriggered其他


  • 排查全部 prop 的 default ,确保不含 this ,如有需要可以用 inject 来访问注入的 property ;
  • 查找自界说指令(通常在 directive 文件夹下),修改生命周期如下:
vue2vue3bindbeforeMountinsertedmountedbeforeUpdateupdate移除(改用 updated )componentUpdatedupdatedbeforeUnmountunbindunmounted升级后


来源:https://blog.csdn.net/majing0520/article/details/111996685
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )