对 VueJS 生命周期钩子的误解答案

【问题标题】：Misunderstanding lifecycle hooks VueJS对 VueJS 生命周期钩子的误解
【发布时间】：2017-08-04 15:00:20
【问题描述】：

我正在开始学习框架 Vue.JS。

我正在使用 Vue.created 的生命周期。我认为一旦创建了 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 被调用，而没有调用 created 函数。

这里是控制台输出：

在 Vue 上创建
开始调用
开始调用
开始调用
开始调用

不每次创建函数都调用，看不懂start函数是怎么调用的，因为start函数在创建函数里面。

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

【问题讨论】：

这听起来更像是您误解了 Web 平台事件的工作方式。 document.onkeydown = this.start 仅将事件处理程序分配给“keydown”事件。一旦调用 keydown 事件，发生这种情况的位置与 start 函数的执行无关。

标签： javascript html dom vue.js vuejs2

【解决方案1】：

created 块内的代码只会在 vue 实例创建时被调用一次，这就是为什么你会看到日志：On Vue created 只有一次。

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

【讨论】：