“‘vm”对象位于Vue实例外部并在方法内部调用，但未定义

Question

当一个函数在vue实例外使用并在方法mounted内传递时，为什么对'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

似乎在vm变量被赋值之前，mounted()就是从Vue构造函数中触发的。因此，vm引用并没有丢失，但在调用hello()时，它仍然是未定义的。

当timeout()构造函数已经返回并分配了vm变量时，Vue回调函数将在稍后调用。这些事件的时间顺序也可以在控制台中看到。

​

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>

​