Vue3 带来的破坏性变更

lovetingyuan
610 阅读1分钟

来源： Breaking Changes | Vue 3 Migration Guide (vuejs.org)

  • 全局API
    • 初始化api变更，new Vue(rootComponent) -> createApp(rootComponent)
    • api模块化，可以treeshake而不是整体挂载在Vue上
  • 模板指令
    • 废弃.sync修饰符，同时重构了v-model，支持了多个值的双向绑定
    • 对于key，在v-if等条件节点不必再指定key；
    • 对于template上的v-for，key 需要定义在template 上而不是包裹的节点上
    • 同时使用v-for和v-if，那么v-if会率先生效
    • v-bind="object"会尊重编写的顺序，例如 
      <div id="red" v-bind="{ id: 'blue' }"> id会渲染为blue </div>
    • v-on:event.native 废弃，被emits选项取代，没有声明的事件都会绑定为原生事件
  • 组件
    • 纯函数组件变得更简单，仅仅只是个函数，相应的原来创建纯函数组件的方式则不再推荐 
      const Funcomp = (props, context) => (<div>{props.message}</div>);
Funcomp.props = ['message'];
    • 异步组件需要使用defineAsyncComponent方法来创建 
      defineAsyncComponent({
  loader: () => import('./Modal.vue'),
}); // 或者
defineAsyncComponent(() => import('./Modal.vue'));
    • 组件的自定义事件必须使用emits选项显式声明
  • Render函数
    • h 方法现在需要 import
    • vnode 格式变更，总体来说变得更加扁平和简洁
    • 解析组件的方式需要使用 resolveComponent
    • $scopedSlots被移除，合并到$slots中，并统一为函数格式
    • $listeners被移除，合并到$attrs中
    • $attrs现在包含了class和style
  • 自定义元素
    • 对于 is 属性，vue会解析为原生属性（用在<component>上除外），这被用来支持 Customized Built-in Element
    • 对于一个元素是否是自定义元素的判断被放到了模板编译的时候
  • 其余变更

    • 生命周期方法变更，destroyed -> unmounted, beforeDestroy -> beforeUnmount

    • 定义组件props中的default方法不可再访问 this

    • transition 中的类名有变化，transition-group支持包裹多个节点

    • 当watch数组时，只有数组整体被赋值更新才会触发，否则需要使用deep

    • 没有特殊指令（v-if,v-for...）的<template>会被渲染为原生template元素

    • 根组件挂载在根节点上时不再替换根节点

    • 指令的生命周期函数发生变化，与组件的生命周期更好的对齐

    • 在组件上监听的生命周期事件前缀由hook改为vue

        <child-component @hook:updated="onUpdated">
  <child-component @vue:updated="onUpdated">

    • data必须为函数，并且位于mixin中的data会被 ”浅合并“

    • $on, $off, $once, $children, $destroy, $set, $delete 都被移除

    • 过滤器被移除，propsData选项被移除，内联模板被废弃，键盘事件keyCode修饰符被废弃

    • 对原生属性处理的一些变化，如当一个属性值为false时不再移除该属性而是设置为字符串的"false"

avatar
文章
阅读
粉丝