Vue学习——【第三弹】

前言

上一篇文章 Vue学习——【第二弹】中我们利用浏览器中的Vue开发者工具了解了Vue的相关工作机制，这篇文章介绍Vue的一个架构模型MVVM模型。

何为MVVM模型

MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
1、 M：模型层，主要负责业务数据相关；
2、 V：视图层，顾名思义，负视图相关，细分下来就是html+css层；
3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

再Vue的官方文档中介绍到，Vue没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。

代码实现

简单来说，MVVM模型的原理就是：利用ViewModel（视图模型），将Model（模型）中的data数据和View（视图）联系起来，实现动态的响应。

输出Vue实例

在文档中我们发现介绍到：通常用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例，我们可以通过代码输出下这个Vue实例：

 <div id="demo2">
        <h2>{{name}}h2>
        <h3>test1:h3>
        <h3>test2:h3>
        <h3>test3:h3>
    div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#demo2',
            data:{
                name:'Vue'
            }
        })
        console.log(vm)
    script>

运行发现，在data中所写入的数据，在vm中都可以找到。

我们可以查看在vm中出现的带有 $ 的数据：

 <div id="demo2">
        <h2>{{name}}h2>
        <h3>test1:{{$options}}h3>
        <h3>test2:{{$emit}}h3>
        <h3>test3:{{$children}}h3>
    div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#demo2',
            data:{
                name:'Vue'
            }
        })
        console.log(vm)
    script>

总结

通过运行结果可以看到：

1：在data中我们所写的属性，都会出现在vm上；
2：vm中所包含的所有的属性以及Vue原型上的属性，在Vue模板中都可使用。

参考文献

Vue官方文档
Vue技能树
B站视频讲解