具体使用方法请查看我的个人博客之page-data-manage

npm install page-data-manage

import PageDataManage from "page-data-manage"

var pdm = new PageDataManage({
    useProxy:false,//是否Proxy代理进行数据监听
    cache:'session',//使用sessionStorage缓存data数据
    data:{
        name:'mvi',
        arr:[1,2,3],        
        user:{
            age:20,
            gender:'男'
        }
    },
    watch:{
        name(newValue,oldValue){//监听name值变更
            console.log(newValue,oldValue);
        }
    }
})

PageDataManage的api以及数据调用

使用data内的数据（PageDataManage将data内的数据都放在其属性$data中）

var name = pdm.$data.user_name; //获取
pdm.$data.user_name = '8394'; //赋值

向data内添加新的字段

pdm.add(key,value)

在初始化PageDataManage之外监听某个字段

var data = {
    a:0
}
var pdm = new PageDataManage({
    data:data,
    cache:'session'
});
//监听$data的a字段
pdm.$watch['a'] = function(newValue,oldValue){
    console.log(newValue,oldValue);//此后如果a发生变化，会触发此方法
}

UseProxy详解

PageDataManage默认使用Object.defineProperty对$data内的数据进行监听，当设置useProxy为true后则PageDataManage使用ES6的Proxy对象对$data内的数据进行监听。

当useProxy为false时，因为Object.defineProperty的限制，需要注意以下几点：

1. Array提供的一系列数组变更方法导致数组变更无法监听到，如push等方法；
2. 如果是对数组重新整体赋值，可以监听到；
3. 对数组某个序列的值进行变更可以监听到，但是监听整个数组的话只能够知晓变化而不能知道newValue与oldValue：

4. 如果是对对象重新赋值可以监听到，但是如果是修改对象中某个字段的值，则监听对这个对象只能够知晓变化而不能知道newValue和oldValue：

pdm.$data.arr[0] = 5;//此赋值操作可以监听到

//watch中
watch:{
    'arr.0':function(newValue,oldValue){
        //可以获取newValue和oldValue的值
    },
    arr(newValue,oldValue){
        //监听整个数组的话也是可以的，但是newValue和oldValue无法获取到
    }
}

pdm.$data.user.gender = '女';//此赋值操作可以监听到

//watch中
watch:{
    'user.gender':function(newValue,oldValue){
        //可以获取newValue和oldValue的值
    },
    user(newValue,oldValue){
        //监听整个对象的话也是可以的，但是newValue和oldValue无法获取到
    }
}

当useProxy为true时，使用的不再是Object.defineProperty，而是最新的Proxy代理，可以解决上述问题，即数组某个序列值变动，可以通过监听数组得知，对象的某个字段变动，可以通过监听该对象得知，并且Array提供的一系列变更数组的方法导致数组被变更可以监听到。而且对象或者数组新值减少属性都可以被监听到。但是超出两级的监听只能监听到数据变化，但是无法获取newValue和oldValue，如下：

pdm.$data.user.age.max = 40;

//watch中
watch:{
    user(newValue,oldValue){//超出两级了
        //上述操作可以在此监听到，但是无法获取user对应的newValue和oldValue，即二者值为undefined
    },
    'user.age':function(newValue,oldValue){//二级
        //上述操作可以在此监听到，且可以获取user.age的newValue和oldValue
    },
    'user.age.max':function(newValue,oldValue){//一级
        //上述操作可以在此监听到，且可以获取user.age.max的newValue和oldValue
    }
}

Cache缓存机制详解

1. PageDataManage默认不使用缓存，即刷新页面后数据会丢失且不同HTML页面之间无法通信。
2. 使用cache属性设置'local'或者'session'来开启缓存机制
3. 某个页面开启缓存后，会同时使用当前页面data内定义的字段和缓存中读取的数据。当缓存读取的数据字段与当前页面data的字段相同时，优先使用data字段的值。
4. 利用缓存，可以实现多个HTML页面之间的数据通信，但是假设A页面缓存使用"local"而B页面缓存使用"session"，则这两个页面数据无法通信，cache值必须一致。