Vue基础教程（33）Vue.js语法之方法选项：别再说“我太难了”！深度解剖Vue.js的“武功秘籍”——methods选项，让你代码战力狂飙！

嘿，伙计们！今天咱们不聊虚的，来啃一块Vue.js里最常用、但也最容易被“想当然”的硬骨头——methods选项。

你是不是经常这样：在<template>里写个@click="handleClick"，然后在methods里定义handleClick函数，一气呵成，感觉Vueso easy！但突然有一天，你发现this指向不对劲了，或者你的方法被莫名其妙调用了无数次，性能卡成PPT。这时候你才恍然大悟：原来我对methods的了解，还停留在“hello world”级别啊！

别慌，今天咱就扮演一回“Vue内科医生”，给methods选项来个彻彻底底的“全身体检”，保证让你看完后直呼：“哦~原来你是这样的methods！”

一、Methods？它不就是个“工具人”吗？

首先，咱们得给methods一个精准的定位。你可以把整个Vue实例想象成一个超级英雄。

• data()：是英雄的记忆，存储着他知道的所有信息（比如力量值、位置、敌人数量）。
• computed：是英雄的直觉/被动技能。比如“生命值低于30%自动触发狂暴”，它依赖于记忆（data），自动计算，结果会被缓存。
• watch：是英雄的侦探直觉，专门盯着某一块“记忆”的变化，一旦变化就执行一些秘密任务。

那methods呢？它就是英雄的主动技能库！比如“发射激光”、“瞬间移动”、“召唤队友”。这些动作不会自动发生，必须由你（用户交互）或某个事件（比如侦听到的数据变化）来主动调用。

核心特征：

1. 主动触发：你不叫它，它绝不动。
2. 可接受参数：就像“发射激光”可以指定功率和方向，handleClick(param)可以接受任何你传给它的东西。
3. 不适合做复杂计算：每次调用都会执行函数体。如果你在里面进行重型计算（比如过滤一个10万条的列表），每次渲染都会算一遍，极其消耗性能（这是computed的战场）。

二、Methods的“灵魂”——this指向之谜

这是无数Vue新手（甚至老手）的扑街之地。在methods里定义的函数，它的this默认自动绑定为当前的Vue组件实例。

这意味着，你可以直接在方法里通过this.xxx来访问或修改data里的数据、调用其他方法、甚至触发computed属性。

<template>
  <div>
    <p>我叫：{
  
  { name }}, 战斗力：{
  
  { power }}</p>
    <button @click="increasePower">吃一颗仙豆！&