Vue2 采用选项式 API（Options API）作为组件开发范式，通过对象属性定义组件的各个部分。本文通过一个完整的 Vue2 组件 Demo，系统展示选项式 API 的核心概念与用法。内容包括：文件后缀使用 .vue，<template> 模板中展示 Element UI 表格组件及插槽（slot-scope）使用；<script> 中包含 name 组件名称、props 属性定义（类型与必填校验）、components 局部组件注册、data 响应式数据定义（如 crud.loading 与 crud.data）、methods 事件处理方法（selectionChangeHandler），以及完整的生命周期钩子详解（beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed），每个钩子附有核心功能与典型用例说明。<style scoped> 实现样式局部作用域。

本文适用于使用 Vue2 开发组件的开发者。

文件后缀

shell
*.vue

html

<template>
    <el-table v-loading="crud.loading" :data="crud.data" style="width: 100%;"
              @selection-change="selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="name" label="文件名">
            <template slot-scope="scope">
                <!-- 获取文件名 -->
                {{ scope.row.name }}
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    import QiNiu from './qiniu/index'
    import Local from './local/index'

    export default {
        // 唯一名称
        name: 'MyComponent',
        props: {
            // 用法：this.title
            // 外部传入：<MyComponent title="这个是标题传入演示"/>
            title: {
                type: String,  // Prop的类型
                required: true  // 该Prop是必需的
            }
        },
        // 引入的组件
        components: {QiNiu, Local},
        // 双向绑定的数据
        data() {
            return {
                crud: {
                    loading: false,
                    data: []
                }
            }
        },
        beforeCreate() {
            // 实例初始化前
            // beforeCreate 是 Vue 实例生命周期的第一个钩子函数。这时实例已经初始化，但数据和事件还未设置。
            // 核心功能：在此阶段，可以做一些初始化工作，但不能访问到 data 和 methods 中的数据，因为它们还未被初始化。
            // 典型用例：可以在这里进行一些全局的配置或者初始化一些非响应式的数据。
        },
        created() {
            // 实例创建后
            // created 钩子在实例创建完成后立即调用，此时实例已经完成了数据观测，属性和方法都已经设置好，但还没有开始 DOM 编译。
            // 核心功能：可以访问和操作 data 和 methods 中的数据。
            // 典型用例：可以在这里进行数据的请求，初始化数据等。
        },
        beforeMount() {
            // 挂载前
            // beforeMount 钩子在挂载开始之前被调用，相关的 render 函数首次被调用。
            // 核心功能：在这个阶段，模板已经在内存中编译完成，但还未挂载到 DOM 上。
            // 典型用例：可以在这里进行一些 DOM 操作，比如设置一些初始的 DOM 状态。
        },
        mounted() {
            // 挂载后
            // mounted 钩子在实例挂载到 DOM 上之后被调用。
            // 核心功能：此时，实例已经挂载到 DOM 上，可以进行 DOM 操作。
            // 典型用例：可以在这里进行 DOM 操作，或者依赖于 DOM 的第三方库的初始化。
        },
        beforeUpdate() {
            // 更新前
            // beforeUpdate 钩子在数据更新之前调用，在虚拟 DOM 重新渲染和打补丁之前被调用。
            // 核心功能：在这个阶段，可以进一步修改状态，不会触发重新渲染。
            // 典型用例：可以在这里对数据进行最后的修改或调整。
        },
        updated() {
            // 更新后
            // updated 钩子在数据更新之后调用，此时 DOM 已经根据数据的变化更新了。
            // 核心功能：可以在这里执行依赖于 DOM 的操作。
            // 典型用例：可以在这里进行一些 DOM 操作或者依赖于 DOM 的第三方库的操作。
        },
        beforeDestroy() {
            // 销毁前
            // beforeDestroy 钩子在实例销毁之前调用，此时实例仍然完全可用。
            // 核心功能：在这个阶段，可以执行一些清理工作，比如清除计时器、解绑事件等。
            // 典型用例：可以在这里清除组件内的计时器、取消订阅等。
        },
        destroyed() {
            // 销毁后
            // destroyed 钩子在实例销毁后调用，此时组件的所有绑定和事件监听器都已被解除。
            // 核心功能：在这个阶段，实例的所有东西都已经被销毁。
            // 典型用例：可以在这里执行一些最终的清理工作。
        },
        // 定义的方法
        methods: {
            selectionChangeHandler(val) {
                console.error(val)
            }
        }
    }
</script>
<!--局部生效的样式-->
<style scoped>
</style>