在 Vue.js 组件中创建 Monaco Editor 的实例

Question

I'm working on Monaco Editor with Vue.js and I cannot understand how Monaco has instantiated into the vue component: 1) I put in data() an editorEx object to use for the purpose, like this

data() {
 editorEx: {}
}

2) I wrote an initMonaco function (called when vue component have mounted) that invokes the constructor 'monaco.editor.create(...)' like this

initMonaco() {
    this.editor = monaco.editor.create(...)
}

Quension: Where is that 'this.editor' variable?

I've never wrote that variable (in component, in vuex) but is working perfectly.

Answer 1

Javascript does not look for a property that defined before, to set a value. It finds the object and sets the value. If there's no such property, it creates.

On the other hand, it also matters how you define the function for what "this" means. I'll give an example on a Vue component data object:

data() {
    return {
        first_object: {
            action() {
                // "this" refers to first_object
            }
        },
        second_object: {
            action: () => {
                // "this" refers to Vue instance
            }
        },
    };
}

I hope this explanation helps.