vue中是如何实现MVVM?

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/suandfei/article/details/102711579

1.什么是MVVM

MVVM 是对前端各个组成部分的重新划分

2.为什么:

旧的前端项目的划分方式已经不能满足新的需求**

旧的前端项目分为三部分:

(1)html:定义页面的结构和内容

(2)css:定义页面内容中的样式

(3)js:为页面添加行为

问题是 : 因为HTML和css都是静态语言,缺少程序语言的要素,所有要动态变化的都依靠添加js来实现,所以js 的负担非常重,重复代码和操作非常多.

.3. MVVM如何重新划分前端项目：

1. 界面(view):html+css

   **增强版的:支持变量,循环分支,等要素**     
   

2. 数据模型(model):其实就是一个保存所有页面所需的变量的对象——data={…}

3.视图模型(viewmodel): 将页面和数据模型绑定在一起.结果导致的是,数据模型中的值如何变化,界面上就跟着自动变化

4.Vue中的MVVM绑定原理

1.构建响应系统

• 将数据模型对象data,引入new Vue() 中

• 打散data对象,为多个属性

• 为每个属性都添加访问器属性 get 和set 将之前的属性变成半隐藏属性以_这个开头

   1). 访问器属性负责获取或修改数据属性的值
   2). 访问器还能在数据属性的值被修改时发出通知
  

2.构建虚拟dom树
虚拟DOM树: 只保存可能变化的元素的简化版DOM树
new Vue() 中的this 指的都是 new Vue 对象

• new Vue()中的el :后的选择器找到要监控的区域
• 扫描父元素及其子元素内容
• 每扫描到一个可能变化的值就放到虚拟Dom树中
• 首次加载页面时,会立刻new vue中查找是否有需要的变量的值.立刻将变量的值替换到真实的DOM数中
• 今后在new Vue中任何位置通过this.变量方式修改了变量值，都会给虚拟DOM树发通知。然后，虚拟DOM树只扫描受影响的元素，找到受影响的元素，用提前封装好的DOM操作，更新真实DOM树