细数那些Vue3中不兼容老版本的改动-LMLPHP

作者:padaker

https://padaker.com/blog/post/5fc73352cb81362ed96f2fb9


4. 现在需要手动挂载根元素

app.mount("#app")

5. Tree-shaking

没有用到的方法(代码)最后不会被打包到最终的包中。这可以优化项目体积。
但是用法也需要进行改变:

import { nextTick } from 'vue'

nextTick(() => {
  // something DOM-related
})

不能再使用Vue.nextTick/this.$nextTick

🔥异步组件需要显示定义

import { defineAsyncComponent } from 'vue'

const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))

🔥$attrs 将包含class和style

vue2.x中,classstyle会被直接设置在组件的根元素上并且不会出现在$attrs中。
但是在vue3中,如果子组件只有一个根元素,则classstyle会被直接设置在该元素上。超过一个则不会设置。
如果组件中设置了inheritAttrs: false,则无论如何都不会自动设置根元素的classstyle

$listeners被移除

事件监听器也被包含还在了$attrs中。

现在属性透传更方便了!

🔥指令

指令和组件生命周期更契合,并使用统一的命名。

新特性fragments

允许组件有多个根元素!

template允许设置key

循环template再也不用往里面设置key了。

scopedSlots正式弃用

vue2.6中对slot进行了改版,但是仍然对scopedSlots兼容,vue3正式弃用掉scopedSlots

监听数组变化需要用deep属性啦

如果不加deep只能检测整个数组被替换。

$children 被移除

如果想访问子组件,使用$refs

事件API被移除

$on,$off,$once不再使用。2.x的EventBus方法不能再使用。

🔥🔥Filter被移除!淦

不能再用|使用filter。Sad。

参考

本文分享自微信公众号 - 前端开发社区(pt1173179243)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

04-11 23:37