【Vue3】选项式 API

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍如何使用选项式 API 编写 Vue3 组件。

选项式 API（Options API）是 Vue 组件的一种传统书写风格，另一种风格是组合式 API（Composition API）。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 从零开始创建一个 Vue3 工程，参考：【Vue3】从零开始编写项目。

2> 编写 Vue 根组件 App.vue。

<!-- 组件结构 -->
<template><div class="person"><h3>姓名：{{ name }}</h3><h3>生日：{{ birth.getFullYear() + '-' + (birth.getMonth() + 1) + "-" + birth.getDate() }}</h3><button @click="showContact">查看联系方式</button></div>
</template><script lang="ts">
export default {// 组件名name: 'App',data() {return {name: '哈利·波特',birth: new Date('1980-07-31'),contact: '霍格沃茨魔法学校格兰芬多学院',}},methods: {showContact() {alert(this.contact)}}
}
</script><!-- 组件样式 -->
<style lang="scss">
.person {background-color: cadetblue;border-radius: 5px;color: white;padding: 20px;button {background-color: gold;border-radius: 5px;padding: 5px 10px;}
}
</style>

说明：

• 数据定义在 data 选项中，data 选项是一个函数，返回一个 JSON 对象，页面结构中可以直接使用此 JSON 对象中的属性值；
• 行为方法定义在 methods 选项中，methods 选项是一个 JSON 对象，其成员由函数 function 组成；
• 此处定义样式使用到了 sass 预处理器，需要执行 npm install -D sass 命令安装。

  PS D:\temp\VUE\vue3-demo> npm install -D sassadded 16 packages in 2s10 packages are looking for funding
  run `npm fund` for details
  

总结

• 此示例中的数据并非响应式数据，即数据的变更并不会反应在页面结构中，后续会专门讲解响应式数据；
• 选项式 API（Options API） 属于 Vue 的传统书写风格，建议使用 Vue 官方推荐的组合式 API（Composition API）。