浅析vuejs原理

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的值也相应会变化