vue3升级了什么

Vue 3 在许多方面都进行了功能性升级和改进。以下是一些 Vue 3 相对于 Vue 2 的新功能和改进：

1. Composition API：引入了 Composition API，这是一个基于函数的 API，使得组合逻辑更加灵活和可重用。Composition API 可以更好地帮助组织组件代码，尤其是对于大型复杂的组件。它提供了更好的代码组织和可维护性。

2. 性能优化：Vue 3 对虚拟 DOM 进行了改进，提高了反应性系统的性能。新的编译器和优化的渲染机制使得 Vue 3 的性能更加出色。

3. TypeScript 支持：Vue 3 对 TypeScript 的支持更加完善。重写了整个代码库，使得 Vue 3 的类型定义更加精确和完备。这使得在使用 TypeScript 进行开发时的开发体验更佳。

4. Teleport：新增了 Teleport 组件，可以方便地将组件的内容挂载到指定的 DOM 节点，这在处理模态框、弹出菜单等场景时非常有用。

5. Fragments：Vue 3 支持了片段（Fragments），允许组件直接返回多个根节点，而无需包裹元素。

6. 响应性 API：提供了新的响应性 API，使得开发者可以更好地控制响应式数据。

7. 更好的Tree-shaking：Vue 3 的包更具有优化的结构，使得它能够更好地支持树摇动 (tree-shaking)，减少最终打包的体积。

8. 更好的开发工具支持：Vue DevTools 已更新以支持 Vue 3，并配合 Vue 3 的新特性做出了相应的改进。

需要注意的是，由于引入了一些新的特性和改进，Vue 3 在某些方面可能不再向后兼容 Vue 2，因此在升级到 Vue 3 时需要对现有代码进行一定程度的调整和迁移。不过，Vue 3 的新特性和性能优势使得它成为了一个更加现代化和强大的前端框架。

1. createApp

// vue2
const app = new Vue({/**选项**/})
Vue.use(/****/)
Vue.mixin(/****/)
Vue.component(/****/)
Vue.directive(/****/)

// vue3
const app = createApp({/**选项**/})
app.use(/****/)
app.mixin(/****/)
app.component(/****/)
app.directive(/****/)
1
2
3
4
5
6
7
8
9
10
11
12
13

2. emits属性

// 父组件
<Hello :msg="msg" @onSayHello="sayHello">

// 子组件
export default {
    name: 'Hello',
    props: {
        msg: String
    },
    emits: ['onSayHello'], // 声明emits
    setup(props, {emit}) {
        emit('onSayHello', 'aaa')
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 多事件

<!-- 定义多个事件 -->
<button @click="one($event),two($event)">提交</button>
1
2

4. Fragment

<!-- vue2 -->
<template>
    <div>
        <h2>{{title}}</h2>
        <p>test</p>
    </div>
</template>

<!-- vue3：不在使用div节点包裹 -->
<template>
    <h2>{{title}}</h2>
    <p>test</p>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13

5. 移除.sync

<!-- vue2 -->
<MyComponent :title.sync="title" />

<!-- vue3 简写 -->
<MyComponent v-model:title="title" />
<!-- 非简写 -->
<MyComponent :title="title" @update:title="title = $event" />
1
2
3
4
5
6
7

.sync用法

父组件把属性给子组件，子组件修改了后还能同步到父组件中来

<template>
  <button @click="close">关闭</button>
</template>
<script>
export default {
    props: {
        isVisible: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        close () {
            this.$emit('update:isVisible', false);
        }
    }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!-- 父组件使用 -->
<chlid-component :isVisible.sync="isVisible"></chlid-component>
1
2

<text-doc :title="doc.title" @update:title="doc.title = $event"></text-doc>

<!-- 为了方便期间，为这种模式提供一个简写 .sync -->
<text-doc :title.sync="doc.title" />
1
2
3
4

6. 异步组件的写法

// vue2写法
new Vue({
    components: {
        'my-component': ()=>import('./my-component.vue')
    }
})
1
2
3
4
5
6

// vue3写法
import {createApp, defineAsyncComponent} from 'vue'

export default {
    components: {
        AsyncComponent: defineAsyncComponent(()=>import('./AsyncComponent.vue'))
    }
}
1
2
3
4
5
6
7
8

7. 移除filter

<!-- 以下filter在vue3中不可用了 -->

<!-- 在花括号中 -->
{message | capitalize}

<!-- 在v-bind中 -->
<div v-bind:id="rawId | formatId"></div>
1
2
3
4
5
6
7

8. Teleport

<button @click="modalOpen = true">
 open
</button>

<!-- 通过teleport把弹窗放到body下 -->
<teleport to="body">
 <div v-if="modalOpen" classs="modal">
   <div>
     teleport弹窗，父元素是body
     <button @click="modalOpen = false">close</button>
   </div>
 </div>
</teleport>
1
2
3
4
5
6
7
8
9
10
11
12
13

9. Suspense

<Suspense>
 <template>
    <!-- 异步组件 -->
   <Test1 />  
 </template>
 <!-- fallback是一个具名插槽，即Suspense内部有两个slot，一个具名插槽fallback -->
 <template #fallback>
    loading...
 </template>
</Suspense>
1
2
3
4
5
6
7
8
9
10

10. Composition API

• reactive
• ref
• readonly
• watch和watchEffect
• setup
• 生命周期钩子函数