响应式状态管理 (data)

在初始化Vue应用时，状态管理是核心环节。通过将变量声明在配置对象的特定区块内，框架会自动将其转换为响应式数据。在模板语法中，开发者无需通过完整的对象路径访问，即可直接读取这些状态。

基础实例中的数据声明

在根实例中，可以直接传入一个普通对象来定义初始状态。对于包含特殊字符的键名，需要使用引号包裹。

const app = new Vue({
  el: '#root',
  data: {
    apiEndpoint: 'https://api.example.com/v1',
    'user-role': 'admin' 
  }
});

组件中的函数式数据返回

在构建可复用组件时，若直接赋值一个普通对象，会导致多个组件实例共享同一内存地址，从而引发状态污染。为此，框架强制要求组件级别的状态必须通过工厂函数返回，确保每个实例拥有独立的数据副本。

Vue.component('user-profile', {
  template: '<div>{{ userInfo.name }}</div>',
  data() {
    return {
      userInfo: { name: 'Alice', age: 28 }
    };
  }
});

业务逻辑封装 (methods)

该配置项用于集中管理实例或组件中的业务函数。定义在此处的方法会自动绑定当前实例的上下文（this），并可直接在模板中调用。

const app = new Vue({
  el: '#app',
  methods: {
    handleFormSubmit() {
      console.log('当前实例上下文:', this);
      // 执行表单提交等相关逻辑
    }
  }
});

需要注意的是，当在模板的插值表达式中直接执行函数时，任何响应式依赖的更新都会触发组件重新渲染，进而导致该函数被重复调用。若计算逻辑较为复杂，这将带来严重的性能损耗，此时应考虑使用计算属性。

派生状态计算 (computed)

计算属性提供了一种基于现有状态派生新状态的机制。其核心优势在于内置了缓存策略：只有当其依赖的响应式数据发生实质性变化时，才会重新执行计算逻辑；否则将直接返回缓存结果。此外，在模板中使用时，它表现得如同普通数据属性一样，无需添加括号调用。

<div id="cart-app">
  <input type="number" v-model.number="cartItems[0].price">
  <input type="number" v-model.number="cartItems[1].price">
  <input type="number" v-model.number="discount">
  
  <p>方法调用总计: {{ calculateTotal() }}</p>
  <p>计算属性总计: {{ finalTotal }}</p>
</div>
<script>
  new Vue({
    el: '#cart-app',
    data: {
      cartItems: [{ price: 100 }, { price: 200 }],
      discount: 0
    },
    methods: {
      calculateTotal() {
        console.log('methods: 重新计算总价');
        return this.cartItems.reduce((sum, item) => sum + item.price, 0) - this.discount;
      }
    },
    computed: {
      finalTotal() {
        console.log('computed: 重新计算总价');
        return this.cartItems.reduce((sum, item) => sum + item.price, 0) - this.discount;
      }
    }
  });
</script>

数据变更侦听 (watch)

侦听器提供了一种响应数据变化的机制，类似于为特定状态绑定了变更回调。当目标状态发生突变时，预设的副作用函数将被自动触发，非常适合处理异步请求或复杂的联动逻辑。

<div id="search-app">
  <input type="text" v-model="searchQuery" placeholder="搜索商品...">
  <ul>
    <li v-for="product in filteredProducts" :key="product.id">{{ product.name }}</li>
  </ul>
</div>
<script>
  new Vue({
    el: '#search-app',
    data: {
      searchQuery: '',
      productList: [
        { id: 1, name: '无线鼠标' },
        { id: 2, name: '机械键盘' },
        { id: 3, name: '蓝牙音箱' },
        { id: 4, name: '降噪耳机' }
      ],
      filteredProducts: []
    },
    created() {
      this.filteredProducts = this.productList;
    },
    watch: {
      searchQuery(newVal) {
        this.filteredProducts = this.productList.filter(p => 
          p.name.includes(newVal)
        );
      }
    }
  });
</script>

组件化与通信配置

组件化是构建大型应用的基础。通过相关配置项，可以实现组件的注册、数据下发与事件上报。

子组件注册与属性传递 (components & props)

子组件可以通过 components 选项进行局部或全局注册。为了接收父组件传递的数据，子组件需要显式声明 props，并建议进行类型校验和默认值设置。

const ProductCard = {
  template: '<div class="card">{{ productName }} - ¥{{ productPrice }}</div>',
  props: {
    productName: {
      type: String,
      required: true
    },
    productPrice: {
      type: Number,
      default: 0
    }
  }
};

new Vue({
  el: '#shop',
  components: {
    ProductCard
  },
  data: {
    currentPrice: 299
  }
});
// 模板调用: <product-card product-name="智能手表" :product-price="currentPrice"></product-card>

子组件事件派发 (自定义事件)

子组件通过 $emit 触发自定义事件，将数据向上传递给父组件。父组件则在模板中通过 v-on (或 @) 监听该事件并执行相应的处理函数。

<div id="event-app">
  <counter-button @increment="handleIncrement"></counter-button>
  <p>父组件计数: {{ parentCount }}</p>
</div>
<script>
  Vue.component('counter-button', {
    template: '<button @click="add">增加</button>',
    data() { return { childCount: 0 }; },
    methods: {
      add() {
        this.childCount++;
        this.$emit('increment', this.childCount);
      }
    }
  });

  new Vue({
    el: '#event-app',
    data: { parentCount: 0 },
    methods: {
      handleIncrement(val) {
        this.parentCount = val;
      }
    }
  });
</script>

逻辑复用机制 (mixins)

混入提供了一种灵活的方式来分发组件中的可复用逻辑。一个混入对象可以包含任意组件选项（如 data、methods、生命周期钩子等）。当组件使用混入时，所有选项将被合并到组件自身的选项中。

定义混入对象

通常将通用的业务逻辑（如分页、加载状态等）提取到独立的文件中。

// paginationMixin.js
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      isLoading: false
    };
  },
  methods: {
    nextPage() {
      this.currentPage++;
      this.fetchData();
    },
    fetchData() {
      this.isLoading = true;
      // 模拟API请求
      setTimeout(() => { this.isLoading = false; }, 1000);
    }
  }
};

局部与全局应用

混入可以在单个组件中局部引入，也可以在整个应用入口进行全局注入。

局部注册：

<template>
  <div>
    <p>当前页码: {{ currentPage }}</p>
    <button @click="nextPage" :disabled="isLoading">下一页</button>
  </div>
</template>
<script>
import paginationMixin from '@/mixins/paginationMixin';

export default {
  mixins: [paginationMixin],
  created() {
    this.fetchData();
  }
};
</script>

全局注册：

import paginationMixin from '@/mixins/paginationMixin';
import Vue from 'vue';

// 全局混入后，后续创建的所有组件实例都会自动合并这些选项
Vue.mixin(paginationMixin);