$mount函數是Vue.js中一個非常重要的函數之一。它是用來手動掛載Vue實例的,而不是自動掛載。在大多數情況下,Vue.js會自動將實例掛載到指定的HTML元素上,但有些情況下,我們需要手動控制。
在Vue.js中,如果我們沒有傳遞el選項給Vue實例,那么它就不會被自動掛載。這時,我們就需要使用$mount函數手動掛載它。$mount的作用是將Vue實例的render函數編譯成虛擬DOM,并將其渲染到真實DOM上。
const app = new Vue({
render: h =>h(App)
})
app.$mount('#app')
在上面的代碼中,我們先創建了一個Vue實例,然后將其掛載到id為app的HTML元素上。這里并沒有在Vue實例的選項里傳遞el屬性,因此我們需要手動調用$mount函數來掛載它。
除了傳遞一個選擇器字符串作為參數之外,$mount函數還可以接收一個DOM節點作為參數,這個節點就是Vue實例將要掛載到的目標節點。
const app = new Vue({
render: h =>h(App)
})
const container = document.getElementById('app')
app.$mount(container)
最后需要注意的是,如果我們沒有手動掛載Vue實例,那么在開發環境下,Vue.js會給出一個警告,告訴我們應該手動調用$mount函數。