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

Answer 2

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