javascript - Vue 实异常(exception)部的“vm”对象并在方法内部调用 Mounted undefined

Question

当函数在 vue 实异常(exception)部使用并传递到装入的方法内部时，为什么会丢失对“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() 是从 Vue 构造函数中触发的，即在 vm 变量被分配之前。因此，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>