实例与选项对象

下面，我们来系统的梳理关于 vue实例与选项对象 的基本知识点：

一、Vue 实例的概念

Vue 应用的核心是 Vue 实例，每个 Vue 应用都通过 new Vue() 或 createApp()（Vue3）创建。实例是 Vue 应用的基础承载容器，负责管理模板、数据、生命周期等核心功能。

二、选项对象核心属性解析

以下为 Vue 实例配置选项中最重要的 5 大核心属性（以 Vue2 选项式 API 为例）：

1. data：数据源

• 作用：定义组件内部响应式数据
• 特性：
  • 必须为函数（避免多个实例共享同一对象）
  • 返回的对象会被 Vue 进行响应式代理
• 代码示例：

  new Vue({data() {return {count: 0,user: { name: 'John' } // 嵌套对象也会被代理}}
  })
  

• 注意事项：
  • Vue3 中 data 依然保持函数形式，但推荐使用 setup() + reactive()（组合式 API）

2. methods：方法集合

• 作用：定义可在模板或实例中调用的函数
• 特性：
  • 每次渲染都会重新执行（无缓存）
  • 适合事件处理或主动触发的逻辑
• 代码示例：

  methods: {increment() {this.count++  // 直接访问 data 属性},async fetchData() {const res = await axios.get('/api/data')this.data