在 Vue.js 組件中創建 Monaco Editor 的實例

Question

我正在使用 Vue.js 開發 Monaco 編輯器，但我無法理解 Monaco 是如何實例化到 vue 組件中的：1）我輸入 data() 一個 editorEx object 用於此目的，就像這樣

data() {
 editorEx: {}
}

2）我寫了一個 initMonaco function （當 vue 組件已安裝時調用）調用構造函數 'monaco.editor.create(...)' 像這樣

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

Quension：“this.editor”變量在哪里？

我從來沒有寫過那個變量（在組件中，在 vuex 中），但工作得很好。

Answer 1

Javascript 不查找之前定義的屬性來設置值。 它找到 object 並設置值。 如果沒有這樣的屬性，它就會創建。

另一方面，如何定義 function 的“this”含義也很重要。 我將舉一個關於 Vue 組件數據 object 的示例：

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

我希望這個解釋有所幫助。