美文网首页promise
什么是Vue的MVVM模式

什么是Vue的MVVM模式

作者: fangdown | 来源:发表于2018-09-03 16:23 被阅读0次

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中的任何一个)

下面举例说明一下

       var book = {
            _year: 2017,
            edtion: 1
        }
        // get set
        Object.defineProperty(book, 'year', {
            get: function () {
                return this._year; //必须返回
            },
            set: function (newValue) {
                this._year = newValue;
                this.edtion += 1;
                // dosomething
            }
        });
        // writable value
        book.year = 2018;
        console.log(book.edtion); //2
        Object.defineProperty(book,'_year', {
            writable: false,
            value: 2018
        })
        book._year = 2019 //没报错
        console.log(book._year) // 2018,说明值不会改变

相关文章

  • Vue之MVVM模式和第一个Vue程序

    一、MVVM模式和第一个Vue程序 目录:MVVM模式、第一个Vue程序 1.MVVM模式 1)什么是MVVM?M...

  • 001、Vue -- MVVM

    在正式开始学习vue之前,需要先了解什么是MVVM,虽然Vue没有完全遵循 MVVM 模式, 但Vue 的设计无疑...

  • vue小总结

    MVVM模式: Vue就是基于MVVM模式实现的一套框架,在Vue中 路由 VUEX .vue文件

  • 1、Vue.js起步

    1.vue是什么? Vue.js官网Vue.js菜鸟教程 2.MVVM模式 MVVM即:Model-View-Vi...

  • 初识Vue

    1. MVVM模式 Vue采用MVVM(Model-View-ViewModel)模式实现,MVVM模式由MVC演...

  • Vue.js(1)----MVVM模式

    MVVM模式 MVVM模式是Vue.js的核心,它是一个Vue实例。Vue实例可以作用某一个HTML元素上,这个元...

  • MVVM在前端(web)使用

    前端框架vue,MVVM模式 今天咱们不谈iOS,说说web(MVVM模式)。MVVM模式在前端开发应该还是挺多的...

  • Vue面试题(第一版)

    Vue面试题(第一版) vue设计模式(MVVM) MVVM是 Model-View-ViewModel的缩写。m...

  • 什么是Vue的MVVM模式

    vue中的MVVM模式即Model-View-ViewModel。 Vue是以数据为驱动的,Vue自身将DOM和数...

  • Vue 需要掌握的知识点

    谈谈Vue中的MVVM模式 MVVM 全称是 Model-View-ViewModel Vue 是以数据为驱动的,...

网友评论

    本文标题:什么是Vue的MVVM模式

    本文链接:https://www.haomeiwen.com/subject/vzmdjxtx.html