【基础02】如何获取Vue的根组件vm

【基础02】如何获取Vue的根组件vm

当你使用creatApp()方法创建了一个Vue应用时，如何能获取根组件那?其实你使用mount()方法时，就会返回根组件。下面的代码，声明一个变量来获取根组件，并打印出来。通过打印你可以看出根组件是一个Proxy形式的对象。

const vm = app.mount("#app")
console.log(vm)

这里为什么我把根组件起名为vm那？我先按下不表，我们先来了解一下Vue的设计模式。

mvvm设计模式讲解

Vue的编程设计模式应该叫做mvvm的设计模式。什么叫做mvvm哪？它首先是面向数据的编程，程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联。最后挂载到真实的DOM上，展示给用户。

mvvm解释: 第一个m代表model数据，第一个v代表view视图，最后两个字幕vm代表viewModel视图数据连接层。

这个解释还不太明白，我们可以看一下

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '陈叔叔'   //1.在这里定义了数据，也就是`model`数据
            }
        },
        template: "<h2>{{message}}</h2>" //2.在这里定义了模板，也就是`view`，
        //定义后的自动关联，就叫做`vm`，viewModel数据视图连接层。
    })
    app.mount("#app")
</script>

model数据，是我们自己定义的，view模板也是我们自己定义的，但是vm是Vue自动给我们关联的。

当我们明白了什么是mvvm后，你就知道为什么我们给根组件起名vm了。

当我们获取了vm根节点后，其实就可以操作里边的数据了。比如在控制台中输入下面的代码：

vm.$data.message ='陈叔叔来了'

这个时候你会发现网页界面也跟着发生了变化，变成了 陈叔叔来了