js中mvvm模式实现原理分析

以Vue.js框架为例，使用mvvm模式

视图是指由网页的html和css组成的视图。

模型是指从后端检索的数据模型

Viewmodel指的是由前端开发人员生成和维护的视图数据层。该层包含视图行为和数据。

视图行为指的是页面加载时的请求，将指定的数据放在指定的元素上，并单击元素来触发事件。处理视图模型后，相应的数据将呈现给视图层。

MVVM模式的优势在于，当视图和viewmodel双向绑定时，不需要在数据更改后修改DOM结构。

例如，当原生js意识到一个输入的值绑定到另一个div的文本时，就需要先监控输入事件，每一个变化都会触发div节点的文本子节点进行修改。使用MVVM模式，可以自动检测数据变化并修改div文本

mvvm的实现原理：使用Object.defineProperty()，该方法有获取和设置两种属性方法，从而获取对象属性的值并重新赋值

//定义分配对象属性的方法letobj={ } object . definepreproperty(obj，' txt '//obj . txt，Set(val){ document . getelementbyid(' input ')。value=valdocument . getelementbyid(' output ')。innerhtml=val}，//get方法的txt属性get(){ return obj；} })//触发监控事件时，会重新分配obj.txt，从而实现document . addevent listener(' keyup '，(e)={ obj . txt=e . target . value；})