什么是Vue的MVVM模式

vue中的MVVM模式
即Model-View-ViewModel。

Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。

ViewModel是Vue的核心,它是Vue的一个实例。Vue实例时作用域某个HTML元素上的,这个HTML元素可以是body,也可以是某个id所指代的元素。

DOM Listeners和Data Bindings是实现双向绑定的关键,实现的原理是Object.defineProperty中的get和set方法,及消息订阅模式。DOM Listeners监听页面所有View层DOM元素的变化,当发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。

Object.defineProperty详解
Object.defineProperty(obj, prop, descriptor)
obj: 目标对象 -必填
prop: 要定义的属性或目标方法 -必填
descriptor: 描述,是一个对象,以下详解:
descriptor(value, writable, configurable, enumerable, get , set)
value: 属性的值
writable: 属性的值是否可以更改,默认false
configurable: 总开关,设置为false后不能修改value、writable、configurable
enumerable:能否在for…in 或者Object.keys中循环出来。

在descriptor中不能同时设置(value、writable) 和 (get、set),否者会报错,
就是说想用(get 和 set),就不能用(wriable 或 value中的任何一个)

下面举例说明一下
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43739375/article/details/88629959