Mvvm----虚拟Dom树

Mvvm:
model view viewModel
mvvm设计模式：对前端代码的重新划分
一、旧的前端代码分为三部分：
html：专门保存网页的内容和结构
css：专门为网页中的元素添加样式
js：专门为网页中的元素添加交互效果
问题：
a.因为html和css都是静态语言，缺少标准的程序语言必须的要素
b.页面上所有的琐碎都要修改，都要依赖js来实现，导致js代码及其冗余，且重复大量劳动
二、新的mvvm将代码分为了3部分：
1.界面(view)：包括以前的html+css，还增强了html的功能
a.给html添加了变量功能，{ {}}，无需任何js代码
b.为html添加了分支和循环功能 v-if v-else v-for
2.模型对象(model)：专门集中保存页面所需的变量和函数的对象
data和methods都是模型对象
3.视图模型(viewModel)：自动将data中的变量和methods中的函数送到界面中指定元素上，并能自动保持界面显示与data中变量值同步，一种特殊的对象
new Vue()就充当了视图模型对象自动配送的角色
三、new Vue()如何实现mvvm设计模式：vue的绑定原理：访问器属性+虚拟dom数
1.访问器属性：
a.专门提供对一个普通属性的保护
b.每个访问器属性都包含一对get和set函数
当外界试图获取访问器属性的值时，自动调用访问器属性中的get
当外界试图修改访问器属性的值时，自动调用访问器属性的set
2.new Vue()如何利用访问器属性
a.