对 VueJS 生命周期钩子的误解

Question

I'm starting a tuto on the framework Vue.JS.

I m using the life cycle created of the Vue. I thought that this function was called once the vue is created. But in this example, A behavior that I do not understand.

<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>

When I type a letter on the keyboard, the function start is called, without calling the function of created.

Here the console output:

• On Vue created
• Start called
• Start called
• Start called
• Start called

I can t understand how the start function is called without calling each time the created function , because the start function is inside the created function.

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

Answer 1

The code inside created block will be only called once when the vue instance is created, thats why you are seeing log : On Vue created only once.

Why are you see Start called on each key pressed: because you have registered this.start on document.onkeydown , so on each key press, this.start will get executed.