vue 方法实现

在 Vue 中，方法的实现通常通过 methods 选项完成。以下是 Vue 方法实现的核心要点和示例：

基本方法定义

在 Vue 组件中定义方法时，需将函数声明放在 methods 对象内。这些方法可以直接通过组件实例调用，或在模板中绑定事件。

export default {
  methods: {
    greet() {
      alert('Hello Vue!');
    }
  }
}

模板中调用方法

在模板中通过指令（如 @click）或插值表达式调用方法：

<button @click="greet">点击问候</button>

方法传参

支持直接传递参数，模板调用时需手动传入：

methods: {
  say(message) {
    console.log(message);
  }
}

<button @click="say('Hi')">传递参数</button>

访问数据属性

方法内部可通过 this 访问组件的数据属性：

data() {
  return { count: 0 };
},
methods: {
  increment() {
    this.count++;
  }
}

异步方法

支持使用 async/await 处理异步逻辑：

methods: {
  async fetchData() {
    const res = await axios.get('/api/data');
    this.data = res.data;
  }
}

方法间的调用

同一组件内的方法可通过 this 相互调用：

methods: {
  methodA() {
    this.methodB();
  },
  methodB() {
    console.log('B被调用');
  }
}

注意事项

• 避免使用箭头函数定义方法，否则会丢失 this 绑定。
• 复杂逻辑建议拆分为多个小方法，提高可维护性。
• 对于性能敏感的操作，可考虑使用计算属性替代方法调用。