MVVM

说到vuejs就不得不说mvvm, vue也可以叫做mvvm框架,mvvm分为三个层M(model),V( view),MV(viewmodel)。

mvvm采用的是数据驱动模式,即视图的变化都取决于数据的更改

其实mvvm和mvp层很相似,唯一的不同是mvvm的v和vm层是同步的,就是说不需要相互通知实现了交互(这就是vuejs在内部在做的事情)使用者只需要绑定数据和视图层后 考虑怎样来控制数据来得到自己想要的效果。

view的变化viewmodel是怎样得知的

视图产生用户操作,viewmodel就能马上得知, 是因为viewmodel将自己作用范围的视图做了编译/rerender等处理,并且根据    指令(v-for,v-click..的指令)来操作了dom,所以被重新渲染到页面中的视图已经与viewmodel做了某些程度的绑定

viewmodel更改完数据之后,视图为什么就能自动更新

viewmodel会对传入data生成$data,利用Object.defineProperty为$data挂载对应的属性,每个属性就会拥有自己的getter和setter,当$data变化之后,不仅更改了data,并且$data的setter就会执行, viewmodel的watcher(这里的watcher是指vue实例相应的函数)就能得知数据的变化,然后进行对应的处理,也就是更新视图。 可以结合下面的代码体会一下

 

 var ViewModel = {
            data: { num: 1, str: '' },
            bindDataChange () {
                this.$data = {  } // 替身
                for (const key in this.data) {
                    // 控制替身身上有data的所有数据
                    // 使用Object.defineProperty为$data挂载数据
                    // 因为用这个方法挂载数据给$data的时候,可以为每一个数据都添加一个getter和setter
                    // this.$data[key] = this.data[key]
                    Object.defineProperty(this.$data, key, {
                        get:() => {
                            return this.data[key]
                        },
                        set:(val) => {
                            this.data[key] = val
                            this[this.watcher[key]]()
                        }
                    })

                }
            },
            watcher: {
                num: 'listenNumChange',
                str: 'listenStringChange'
            },
            listenNumChange () { // 这个watcher会等到num变化的时候执行
                console.log('num变化了')
            },
            init () {
                this.bindDataChange()
            }
        }


        ViewModel.init()


        ViewModel.$data.num ++  // 修改$data data的值也相应会变化

   

 

Logo

前往低代码交流专区

更多推荐