Vue: 创建的实例中调用函数为什么不用加前缀methods？

Question

//html
<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>

//js
// make sure to call Vue.use(Vuex) if using a module system

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
      increment: state => state.count++,
    decrement: state => state.count--
  }
})

new Vue({
  el: '#app',
  computed: {
    count () {
        return store.state.count
    }
  },
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
        store.commit('decrement')
    }
  }
})

在以上代码中，

<button @click="increment">+</button>
<button @click="decrement">-</button>

为什么不是methods.increment()?

Answer 1

因为 vue 自己做了处理，把 methods 里定义的属性代理到了实例上。 vue 源码：

vm 就是当前的实例。

Answer 2

vue中的方法就是写在methods中的啊，你在调用的时候直接写方法名就好了，它是内部注入进去的，就比如你在data里定义一个字符串arr，你在模板中写的时候直接写arr而不是data.arr

Answer 3

vue中的methods、data...这些都是直接暴露在vue的构造器中，你在实例化的时候，他们的this指向是你实例化的那个对象，你直接用this.方法就可以直接调用