'vm'オブジェクトがVueインスタンス外にあり、内部メソッド呼び出しが呼び出されましたundefined

Question

関数がvueインスタンスの外側で使用され、マウントされたメソッドの内部で渡されると、なぜ 'vm'への参照が失われますか？

https://jsfiddle.net/z9u39hgu/5/

var vm = new Vue({ 
 
    el: '#app-4', 
 
    data: { 
 
     isLoading: true 
 
    }, 
 
    mounted: function() { 
 
     hello(); 
 
    } 
 
}); 
 

 

 
function hello() { 
 
    console.log(JSON.stringify(vm)); 
 
    //vm.isLoading = true; 
 
    setTimeout(function() { 
 
     console.log(JSON.stringify(vm, replacer)); 
 
     //vm.isLoading = false; 
 
    }) 
 
} 
 

 
//Extra code ignore 
 
seen = []; 
 

 
var replacer = function(key, value) { 
 

 
if (value != null && typeof value == "object") { 
 
    if (seen.indexOf(value) >= 0) { 
 
     return; 
 
    } 
 
    seen.push(value); 
 
} 
 
return value; 
 

 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="app-4"> 
 
    <p v-if="isLoading">Vuejs loading...</p> 
 
</div>

Answer 1

mounted()がvm変数にも割り当てることができ、すなわち前に、Vueのコンストラクタから発射されているようです。したがってvm参照は失われませんが、hello()が呼び出されるとまだ定義されていません。

Vueコンストラクタが既に返され、vm変数が割り当てられているときに、timeout()コールバックが後で呼び出されます。これらのイベントの年表もコンソールに表示されます。説明する

var vm = new Vue({ 
 
    el: '#app-4', 
 
    data: { 
 
     isLoading: true 
 
    }, 
 
    mounted: function() { 
 
     hello(); 
 
    } 
 
}); 
 

 

 
function hello() { 
 
    console.log("before timeout: " + typeof(vm)); 
 
    //vm.isLoading = true; 
 
    setTimeout(function() { 
 
     console.log("after timeout: " + typeof(vm)); 
 
     //vm.isLoading = false; 
 
    }) 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="app-4"> 
 
    <p v-if="isLoading">Vuejs loading...</p> 
 
</div>