Vue3使用及用在uni-app小程序开发

码客说

发布于 2024-07-11 09:59:12

3420

发布于 2024-07-11 09:59:12

文章被收录于专栏：码客

Vue3的优点

Vue3 相对于 Vue2 主要有以下优点：

性能优化：Vue3 通过重新设计了响应式系统，提高了性能。新的编译器和虚拟 DOM 的优化也带来了更高的性能表现。
Composition API：Vue3 引入了 Composition API，可以让开发者更灵活地组织和重用组件逻辑，代码结构更清晰，复用性更高。
TypeScript 支持：Vue3 对 TypeScript 的支持更加友好，可以更好地利用 TypeScript 的优势进行开发和维护。
更小的包体积：Vue3 的核心体积更小，加载速度更快，减少了对网络带宽的占用。
更灵活的响应式数据处理：Vue3 提供了更多的选项和方式来处理响应式数据，使得数据处理更加灵活和高效。

总的来说，Vue3 在性能、开发体验以及可维护性上都有很大的提升，是一个更为强大和现代化的前端框架。

选项式 API和组合式 API

Vue3的组件可以按两种不同的风格书写：选项式 API 和组合式 API。

选项式 API

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

组合式API

<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>

模块导入/导出

导入

// 之前 - Vue 2, 使用 commonJS
var utils = require("../../../common/util.js");

// 之后 - Vue 3， 只支持 ES6 模块
import utils from "../../../common/util.js";

导出

// 之前 - Vue 2, 依赖如使用 commonJS 方式导出
module.exports.X = X;

// 之后 - Vue 3， 只支持 ES6 模块
export default { X };

Props 声明

<script setup>
const props = defineProps({
  title: String,
  likes: Number
});

console.log(props.title)
</script>

事件

<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 的值同步；
当它被子组件变更了，会触发父组件绑定的值一起更新。

插槽

组件

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

使用

<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> 节点都被隐式地视为默认插槽的内容。

所以上面也可以写成：

<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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-10，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序