【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 sass
  
  added 16 packages in 2s
  
  10 packages are looking for funding
  run `npm fund` for details
  

总结

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