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

???v-model新语法糖

---

默认使用modelValue传递值。

<ChildComponent

:modelValue=“pageTitle”

@update:modelValue=“pageTitle = $event”

/>

也支持绑定不同的属性，有点像是v-model和sync的结合体。

<ChildComponent

:title=“pageTitle”

@update:title=“pageTitle = $event”

:content=“pageContent”

@update:content=“pageContent = $event”

/>

???全局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属性啦

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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