选项式API是Vue最传统、最易理解的代码组织方式。就像填表格一样，在特定位置填写特定内容：

export default {
  // 在这里定义数据
  data() {
    return {
      message: '你好Vue!'
    }
  },
  
  // 在这里定义方法
  methods: {
    greet() {
      alert(this.message)
    }
  },
  
  // 组件挂载后执行
  mounted() {
    console.log('组件已加载')
  }
}

1. data – 组件的数据仓库

存放所有组件数据的地方，必须是一个函数，返回一个数据对象

data() {
  return {
    count: 0,
    username: '小明',
    todos: ['学习 Vue', '写代码', '睡觉']
  }
}

在模板中可以使用 {{ count }} 显示数据

2. methods – 组件的方法库

存放所有组件方法的地方，定义事件处理函数或普通方法

methods: {
  increment() {
    this.count++  // 通过 this 访问 data 中的数据
  },
  greet(name) {
    alert('你好, ' + name)
  }
}

在模板中绑定：<button @click="increment">增加</button>

3. computed – 计算属性

自动计算的值，当依赖的数据变化时自动更新（有缓存）

computed: {
  // 计算属性是函数形式，但当作属性使用
  reversedMessage() {
    return this.message.split('').reverse().join('')
  },
  
  // 带 setter 的计算属性
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName
    },
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

4. watch – 侦听器

监听数据变化，执行自定义操作

watch: {
  // 监听 count 的变化
  count(newValue, oldValue) {
    console.log(`count 从 ${oldValue} 变为 ${newValue}`)
  },
  
  // 深度监听对象
  user: {
    handler(newUser) {
      console.log('用户信息变化:', newUser)
    },
    deep: true,   // 监听对象内部变化
    immediate: true // 立即执行一次
  },
  
  // 监听对象属性
  'user.name'(newName) {
    console.log('用户名变更为:', newName)
  }
}

5. props – 接收父组件数据

定义组件可以接收的属性（类似函数参数）

props: {
  // 基础类型检测
  title: String,
  
  // 多个可能的类型
  size: [String, Number],
  
  // 必填且为字符串
  username: {
    type: String,
    required: true
  },
  
  // 带默认值的数字
  age: {
    type: Number,
    default: 18
  },
  
  // 对象/数组默认值应当从一个工厂函数获取
  config: {
    type: Object,
    default() {
      return { color: 'blue', size: 'medium' }
    }
  }
}

6. emits – 定义组件发出的事件

声明组件可以触发哪些事件（类似函数返回值）

emits: ['submit', 'cancel'],

methods: {
  handleSubmit() {
    this.$emit('submit', formData)  // 触发 submit 事件
  }
}

Vue 组件从创建到销毁的完整生命周期：

export default {
  beforeCreate() { /* 初始化前 */ },
  created() { /* 数据已准备就绪 */ },
  beforeMount() { /* 挂载到DOM前 */ },
  mounted() { /* 挂载完成，操作DOM */ },
  beforeUpdate() { /* 数据变化，视图更新前 */ },
  updated() { /* 视图已完成更新 */ },
  beforeUnmount() { /* 组件销毁前 */ },
  unmounted() { /* 组件销毁完成 */ }
}