Vue3的优点
Vue3 相对于 Vue2 主要有以下优点：
- 性能优化：Vue3 通过重新设计了响应式系统，提高了性能。新的编译器和虚拟 DOM 的优化也带来了更高的性能表现。
- Composition API：Vue3 引入了 Composition API，可以让开发者更灵活地组织和重用组件逻辑，代码结构更清晰，复用性更高。
- TypeScript 支持：Vue3 对 TypeScript 的支持更加友好，可以更好地利用 TypeScript 的优势进行开发和维护。
- 更小的包体积：Vue3 的核心体积更小，加载速度更快，减少了对网络带宽的占用。
- 更灵活的响应式数据处理：Vue3 提供了更多的选项和方式来处理响应式数据，使得数据处理更加灵活和高效。
总的来说，Vue3 在性能、开发体验以及可维护性上都有很大的提升，是一个更为强大和现代化的前端框架。
选项式 API和组合式 API
Vue3的组件可以按两种不同的风格书写：选项式 API 和组合式 API。
选项式 API
代码语言：javascript复制<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>组合式API
代码语言：javascript复制<script setup>
import {
ref
} from "vue";
import {
onLoad,
onShow
} from "@dcloudio/uni-app";
const title = ref("Hello");
onLoad((option) => {
console.log("onLoad:", option);
title.value = "你好";
});
onShow(() => {
console.log("onShow");
});
</script>模块导入/导出
导入
代码语言：javascript复制// 之前 - Vue 2, 使用 commonJS
var utils = require("../../../common/util.js");
// 之后 - Vue 3， 只支持 ES6 模块
import utils from "../../../common/util.js";导出
代码语言：javascript复制// 之前 - Vue 2, 依赖如使用 commonJS 方式导出
module.exports.X = X;
// 之后 - Vue 3， 只支持 ES6 模块
export default { X };Props 声明
代码语言：javascript复制<script setup>
const props = defineProps({
title: String,
likes: Number
});
console.log(props.title)
</script>事件
代码语言：javascript复制<script setup>
const emit = defineEmits(['inFocus', 'submit'])
function buttonClick() {
emit('submit')
}
</script>双向绑定
从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：
<!-- Child.vue -->
<script setup>
const model = defineModel()
function update() {
model.value
}
</script>
<template>
<div>Parent bound v-model is: {{ model }}</div>
<button @click="update">Increment</button>
</template>父组件可以用 v-model 绑定一个值：
<!-- Parent.vue -->
<Child v-model="countModel" />defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：
- 它的
.value和父组件的v-model的值同步； - 当它被子组件变更了，会触发父组件绑定的值一起更新。
插槽
组件
代码语言：javascript复制<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>使用
代码语言：javascript复制<BaseLayout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<template #default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template #footer>
<p>Here's some contact info</p>
</template>
</BaseLayout>当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容。
所以上面也可以写成：
代码语言：javascript复制<BaseLayout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<!-- 隐式的默认插槽 -->
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template #footer>
<p>Here's some contact info</p>
</template>
</BaseLayout>
