誤解生命週期鉤VueJS

我使用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>

當我在鍵盤上輸入一個字母，功能開始被調用，而不調用的創建功能。

這裏的控制檯輸出：

在Vue公司創造
開始叫
開始叫
開始叫
開始叫

我不懂如何啓動功能被稱爲withou每次調用創建的函數時，都會調用，因爲啓動函數位於創建的函數內部。

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

來源

2017-03-14 Kikou

這聽起來更像是你誤解了網絡平臺事件的工作方式。 'document.onkeydown = this.start'只給「keydown」事件分配一個事件處理函數。發生這種情況與啓動函數的執行無關，一旦調用了keydown事件。 – nils

內created塊中的代碼將再次在創建的VUE實例只能調用，這就是爲什麼你看到日誌：On Vue created只有一次。

爲什麼你看到Start called在每次按鍵：因爲你已經在document.onkeydown註冊this.start，等每按一次鍵，this.start將得到執行。

來源

2017-03-14 10:21:38 Saurabh

誤解生命週期鉤VueJS

回答

相關問題