Vue是一款廣泛應用于前端開發領域的JavaScript庫,它可以方便地創建復雜的交互界面。從Vue官網上可以知道,Vue實例是由一個恢復到簡潔的模板語法、以及一個用于連接視圖和數據的響應式核心庫構成的。Vue內部調用vm是Vue框架方法調用的主要方式。
Vue中所有的內部調用都是基于vm的,vm是Vue的實例。在Vue的核心庫內,它通過VM類安裝了所有的混入,VM類本質上是一個構造器函數,然后會在new Vue的時候創建一個VM實例,這個VM實例就是我們所說的根VM。
Vue內部調用vm的方法有很多,比如$set、$watch、$on、$off等等。這些方法在Vue的源碼中都有相應的實現。以$set為例,它可以對對象進行深度增加,例如:
let vm = new Vue({
data: {
person: {
name: 'Lucy',
age: 12,
sex: 'F',
character: {
color: 'pink'
}
}
}
})
Vue.set(vm.person.character, 'food', 'cake')
以上代碼中,當我們運行這段代碼后,會發現對象person中的character字段已經增加了一個字段food。這就是Vue內部調用vm的方法,通過Vue實例來動態地改變響應式數據。
另外,在Vue中,如果我們想要手動獲取vm實例,可以使用$root方法,也可以使用父子關系中的$parent、$children方法進行獲取。例如:
let rootVM = new Vue({
el: '#root',
data: {
message: 'I am root Vue instance'
},
created: function () {
console.log(`I am ${this.message}`)
},
mounted: function () {
console.log(`My DOM element is ${this.$el}`)
}
})
let childVM = new Vue({
el: '#child',
data: {
message: 'I am child Vue instance'
},
created: function () {
console.log(`I am ${this.message}`)
},
parent: rootVM,
mounted: function () {
console.log(`My DOM element is ${this.$el}`)
}
})
console.log(rootVM.$children) // 輸出[VueComponent]
console.log(childVM.$parent) // 輸出VueComponent
console.log(childVM.$root === rootVM) // 輸出true
以上代碼中,我們在HTML頁面中定義了兩個Vue實例,一個是根實例,一個是子實例,并通過parent屬性進行了父子關聯。運行以上代碼后,會在控制臺中輸出相應的信息,可以更加深入地理解vm的內部調用。
總之,Vue內部調用vm的方法是Vue框架非常重要的組成部分之一。它可以讓我們方便地動態地改變響應式數據,使用$root、$parent、$children等方法獲取vm實例,讓我們的Vue開發更加快捷高效。