Vue基础教程（34）Vue.js语法方法选项之使用方法：Vue.js方法选项全揭秘：你的代码不再是“呆板”的代码机器人！-优快云博客

你是不是曾经在写Vue组件时，面对methods、computed和watch这三个选项，感觉像在选午餐套餐——明明都见过，却不知道哪个最适合当前场景？别急，今天我们就来一场“Vue方法选项脱口秀”，用大白话拆解这些语法，附上完整示例，保证让你的代码从“呆板机器人”升级为“智能小助手”！

一、`methods`：你的“行动派”工具包

methods是Vue中最直白的方法选项，专门处理用户交互或需要主动调用的逻辑。比如点击按钮、提交表单，它就像你的双手，随时准备干活。但注意：每次渲染都会重新计算，如果方法内部有复杂操作，可能影响性能。

示例场景：一个计数器组件，点击按钮增加数字。

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">点我+1</button>
    <button @click="reset">重置归零</button>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count += 1;
      console.log("计数增加啦！");
    },
    reset() {
      this.count = 0;
      alert("已重置！");
    }
  }
}
</script>

关键点：

methods中的方法可通过@click等事件绑定，或直接在其他方法中调用（如this.increment()）。
适合需要主动触发的逻辑，比如API请求、DOM操作。
缺点：如果方法依赖响应式数据，且数据未变化时，每次访问仍会执行函数（比如在模板中调用{{ calculate() }}可能重复计算）。

二、`computed`：智能“计算器”，省钱省力！

computed属性是Vue的“智能管家”，它基于依赖的响应式数据缓存结果。只有当依赖变化时，才重新计算，否则直接返回缓存值。适合派生数据，如过滤列表、合计价格等。

示例场景：购物车总价计算。

<template>
  <div>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - ￥{{ item.price }} × {{ item.quantity }}
      </li>
    </ul>
    <p>总价：￥{{ totalPrice }}</p>
    <p>打折后：￥{{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cart: [
        { id: 1, name: "Vue实战书", price: 50, quantity: 2 },
        { id: 2, name: "键盘", price: 200, quantity: 1 }
      ],
      discount: 0.8
    }
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
    },
    discountedPrice() {
      return this.totalPrice * this.discount; // 依赖totalPrice和discount
    }
  }
}
</script>

关键点：

computed是只读的，不要尝试修改它（需用setter时除外）。
依赖数据未变化时，多次访问totalPrice不会重复计算，提升性能。
适用场景：数据转换（如日期格式化）、条件判断（如isShowButton）。

三、`watch`：数据变化的“监控探头”

watch用于监听特定数据的变化，并在变化时执行异步或复杂逻辑。比如搜索框输入防抖、路由参数变化时重新请求数据。它像侦探一样盯着数据，一变就行动。

示例场景：搜索关键词防抖处理。

<template>
  <div>
    <input v-model="keyword" placeholder="输入搜索内容" />
    <ul>
      <li v-for="result in results" :key="result">{{ result }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      results: [],
      timer: null
    }
  },
  watch: {
    keyword(newVal, oldVal) {
      // 防抖处理：输入停止500ms后再搜索
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        if (newVal) {
          // 模拟API请求
          this.results = await this.searchAPI(newVal);
        } else {
          this.results = [];
        }
      }, 500);
    }
  },
  methods: {
    async searchAPI(keyword) {
      return Promise.resolve([`结果1：${keyword}`, `结果2：${keyword}进阶`]);
    }
  }
}
</script>

关键点：

watch可监听data、computed或props的值。
支持深度监听（deep: true）和立即执行（immediate: true）。
适用场景：数据变化需联动其他操作（如路由监听、动画触发）。

四、三大选项对比：别再用错啦！

选项	作用	是否缓存	适用场景
`methods`	处理事件或主动调用	否	点击事件、提交表单
`computed`	依赖数据计算派生值	是	价格合计、条件渲染
`watch`	监听数据变化执行副作用	否	搜索防抖、路由参数响应

记忆口诀：

要动手？找methods！
要算账？找computed！
要盯梢？找watch！

五、实战坑点避雷指南

computed vs methods：
在模板中调用方法时，如果方法依赖响应式数据，且数据未变化，用computed避免重复计算。例如：

<!-- 不推荐 -->  
<p>{{ calculateTotal() }}</p> <!-- 每次渲染都执行 -->  
<!-- 推荐 -->  
<p>{{ total }}</p> <!--  computed缓存结果 -->

watch的深度监听陷阱：
监听对象或数组时，默认只监听引用变化。如需监听内部属性，需加deep: true：

watch: {
  user: {
    handler(newVal) { console.log("用户信息变了！") },
    deep: true // 监听user对象所有属性
  }
}

异步操作慎用computed：
computed应保持同步，异步逻辑请用watch或methods。否则可能返回未解决的Promise，导致模板显示异常。

六、完整示例：任务管理器实战

结合三大选项，构建一个任务管理应用：

<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="新增任务" />
    <ul>
      <li v-for="task in filteredTasks" :key="task.id">
        <input type="checkbox" v-model="task.done" />
        <span :class="{ done: task.done }">{{ task.text }}</span>
      </li>
    </ul>
    <p>进度：{{ completionRate }}%</p>
    <button @click="filter = 'all'">全部</button>
    <button @click="filter = 'undone'">未完成</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: "",
      tasks: [
        { id: 1, text: "学习Vue", done: false },
        { id: 2, text: "写代码", done: true }
      ],
      filter: "all"
    }
  },
  computed: {
    filteredTasks() {
      if (this.filter === "undone") {
        return this.tasks.filter(task => !task.done);
      }
      return this.tasks;
    },
    completionRate() {
      const total = this.tasks.length;
      const doneCount = this.tasks.filter(task => task.done).length;
      return total ? Math.round((doneCount / total) * 100) : 0;
    }
  },
  watch: {
    tasks: {
      handler() {
        console.log("任务列表变化，可自动保存到本地存储");
        localStorage.setItem("tasks", JSON.stringify(this.tasks));
      },
      deep: true
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({
          id: Date.now(),
          text: this.newTask,
          done: false
        });
        this.newTask = "";
      }
    }
  }
}
</script>
<style>
.done { text-decoration: line-through; }
</style>