Vue2(笔记03) - Vue核心 - MVVM模型、数据代理

MVVM模型

Vue 在设计时参考了 ​​MVVM 模型​​，因此在文档中经常使用 VM 这个变量名表示 Vue 实例；

一条数据绑定线：把数据放到指定位置；

一条DOM监听线：监听页面的DOM，将数据映射回去；

写一段代码来理解：

<div id="root">
    <h1>姓名：{{name}}</h1>
    <h2>年龄：{{age}}</h2>
</div>

const vm = new Vue({
    el:"#root",
    data:{
        name:"Jack",
        age:28
    }
});
console.log(vm);

数据(Model)经过Vue(ViewModel)放到页面模板(View)中；

页面修改(View)映射回数据经过 Vue(ViewModel)返回数据(Model)；

总得来说：Vue 就是数据与页面之间的桥梁；目前前端主流框架都是这个思想；

把 Vue 实例对象 vm 输出看一下：

里面除了 我们直接可使用的 name 和 age 属性外，还有很多属性和方法，vm 实例对象都可以使用；

【总结】：

MVVM模型：

1）M： 模型（Model），对应 data 中的数据 ；

2）V： 视图（View），模板代码

3）VM：视图模式（ViewModel），Vue实例对象；

观察发现：

1）data 中所有的属性，最后都出现在了 vm 身上；

2）vm 身上所有的属性及 Vue 原型上所有属性，在 Vue 模板中都可以直接使用；

数据代理

Object.defineProperty