Vue3有哪些不向下兼容的改变

???全局API

---

1. 不再使用new Vue

问题

使用new Vue会共享一个全局配置。这对于测试来说不太友好，每个测试用例都需要一个沙盒环境，全局变量去残留一些副作用。

解决

开始使用application概念，创建一个App。

2. 不再用Vue.prototype

// before - Vue 2

Vue.prototype.$http = () => {}

// after - Vue 3

const app = Vue.createApp({})

app.config.globalProperties.$http = () => {}

3. 全局方法现在在app实例上

| vue2.x | vue3 |

| — | — |

| Vue.component | app.component |

| Vue.directive | app.directive |

| Vue.mixin | app.mixin |

| Vue.use | app.use |

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

app.mount(“#app”)

5. Tree-shaking

“

In Vue 3, the global and internal APIs have been restructured with tree-shaking support in mind.

”

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

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中，class和style会被直接设置在组件的根元素上并且不会出现在$attrs中。但是在vue3中，如果子组件只有一个根元素，则class和style会被直接设置在该元素上。超过一个则不会设置。如果组件中设置了inheritAttrs: false，则无论如何都不会自动设置根元素的class和style。

$listeners被移除

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

现在属性透传更方便了！

???指令

---

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

| vue2.x | vue3 |

| — | — |

| bind | beforeMount |

| inserted | mounted |

| - | beforeUpdate (新) |

| update (移除) | - |

| componentUpdated | updated |

| - | beforeUnmount (新) |

| unbind | unmounted |

新特性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。

参考

–

• 本篇文章整理自官方文档：https://v3.vuejs.org/guide/migration/introduction.html

相关文章

---

1. Vue3的学习记录

2. Vue3开发踩坑

3. 一篇文章上手Vue3中新增的API

最后

–

转发文章并关注公众号：前端开发博客，回复 1024，领取前端进阶资料

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-V6rcdif3-1712868842541)]