2017-03-14 4 views
0

프레임 워크 Vue.JS에 대한 tuto를 시작합니다.오해의 생명주기 후크 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> 

나는 키보드에서 문자를 입력

함수 시작 생성의 기능을 호출하지 않고 호출됩니다. 여기

콘솔 출력 :

  • 뷰에는
  • 시작
  • 시작
  • 시작
  • 시작

내가 t 방법을 이해 할 수라고라고라고라고 만들어 시작 함수는 withou라고합니다. 시작 함수가 생성 된 함수 안에 있기 때문에 생성 된 함수를 호출 할 때마다 이 반환됩니다. 한 번만 On Vue created : 당신이 로그를 보는 이유 created 블록 내부의 코드에만 VUE의 인스턴스가 만들어 질 때 한 번 호출됩니다

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

웹 플랫폼 이벤트 작동 방식을 오해하고있는 것처럼 들립니다. 'document.onkeydown = this.start'는 "keydown"이벤트에만 이벤트 핸들러를 할당합니다. 이런 일이 일어나면 start 함수를 실행하는 것과 관련이 없습니다. 일단 keydown 이벤트가 호출되면. – nils

답변

3

는 이잖아.

왜 누르면 각 키에 Start called를 볼 수 있습니다 : 각 키 누름에, 그래서 this.start이 실행 얻을 것이다, document.onkeydownthis.start를 등록하기 때문이다.