vue核心之双向数据绑定

一，mvvm双向数据绑定，即数据改变，更新视图。视图改变更新数据。

二，知识补充，

1，数据劫持

1)vue2.0采用es5的Object.defineProperty(object,property,{config})。

class Vue {
            constructor(obj) {
                this.option = obj;
                this.data = obj.data;
                this.observe(this.data);
            }
            observe(obj) {
                //遍历对象
                if(typeof obj!=='object') return
                Object.keys(obj).forEach(key => {
                    this.reactive(obj, key, obj[key])
                })
            }
            reactive(obj, key, value) {
                this.observe(value);//递归遍历对象
                Object.defineProperty(obj, key, {
                    get() {
                        console.log('get',key)
                        return value
                    },
                    set(newVal) {
                        if (newVal === value) return
                        console.log('set',key)
                        return value=newVal
                    }
                })
            }
        }
        let data = {
            name: 'zhangsan',
            age: 14,
            address: {
                city: 'beijing'
            }
        }
        var vue = new Vue({
            data
        })
        vue.data.age=18
        vue.data.address.city='324'

2，发布订阅模式参考如下

https://segmentfault.com/a/11...

三，双向数据绑定（v-model）。

1，实现一个observe(监听器)，监听数据的变化。
2，实现一个watcher(观察者)，接受observe属性变化的消息，然后执行watcher里面的相应方法，实现视图更新。
3，实现一个订阅器，用来收集订阅者(收集依赖)，对监听器Observer和 订阅者Watcher进行统一管理；
4,实现一个compile(编译器)