误解生命周期钩子VueJS

Question

我要开始一个关于框架Vue.JS的教程。

我正在使用创建的Vue的生命周期。我认为这个函数在vue创建之后就被调用了。但是在这个例子中，我不理解的行为。

<template>
  <div class="game">
    <span class="round"  v-on:click="clickOnRound" v-on:click.alt="bonus"></span>
  </div>
</template>

<script>
  export default {
    name: 'game',
    created: function () {
      console.log('On Vue created')
      document.onkeydown = this.start
    },
    methods: {
      clickOnRound: function (event) {
        console.log('Click')
      },
      bonus: function (event) {
        console.log('Click + alt')
        console.log(event)
      },
      start: function (event) {
        console.log('Start called')
        console.log(event)
      }
    }
  }
</script>

当我在键盘上键入一个字母时，调用函数start，而不调用已创建的函数。

在这里，控制台输出：

• 论Vue创造
• 开始调用
• 开始调用
• 开始调用
• 开始调用

如果不每次调用创建的函数，我就无法理解开始函数是如何被调用的，因为start函数在创建的函数中。

 created: function () {
      console.log('On Vue created')
      document.onkeydown = this.start
    },

Answer 1

在创建vue实例时，已创建块中的代码只会被调用一次，这就是为什么您只看到log：On Vue created一次的原因。

为什么要在每个键上看到Start called：因为您已经在document.onkeydown上注册了this.start，所以在每个按键上，this.start都会被执行。