vue中为何方法要写在methods的里面

在Vue中，我们使用methods对象来存储Vue实例中的方法。之所以要将方法写在methods中，是因为Vue框架在初始化Vue实例时，需要遍历所有的data、computed、watch和methods，以及vue定义的生命周期钩子函数，以便进行响应式的绑定与更新。

在methods中定义的方法可以在Vue模板绑定中通过v-on指令进行调用，也可以通过Vue实例调用。同样，在Vue组件中也是通过调用methods中定义的方法来完成逻辑处理。而methods定义的方法被调用时，会自动绑定this到Vue实例上，使得Vue实例中的属性和方法可以在方法内部调用。

下面是两个示例说明：

1. 使用methods中定义的方法进行点击事件的处理

在Vue模板中，我们可以通过v-on指令将一个事件绑定到Vue实例中的methods方法上。例如，我们在Vue实例中定义一个名为sayHello的方法，然后在模板中使用v-on指令将一个click事件绑定到此方法上：

<template>
  <div>
    <button v-on:click="sayHello">Say Hello</button>
  </div>
</template>
<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello World')
    }
  }
}
</script>

当我们点击上述模板中的按钮时，会自动调用methods中定义的sayHello方法，然后在控制台中输出‘Hello World’。这里需要注意的是，绑定在methods中的方法都必须定义在Vue实例的methods对象中。

1. 在Vue组件中调用methods中定义的方法

除了在模板中绑定事件之外，在Vue组件中也可以使用methods来定义组件中的方法，并在组件的生命周期钩子、watch方法、computed计算属性等地方进行调用。例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

在这个示例中，我们在组件的data选项中定义了一个名为message的属性，然后在methods对象中定义了名为reverseMessage的方法，用于将message属性中的字符串进行翻转。在模板中，我们绑定了一个事件到reverseMessage方法上，这样当用户点击按钮时，就会调用reverseMessage方法，对message中的字符串进行翻转，并且将结果输出到模板中。

综上所述，在Vue中，将方法写在methods对象中可以方便我们在Vue实例、组件中进行调用，实现数据的响应式更新。