js开发中，怎样才能做到像Vue一样监听某个变量的变化？

JS前端开发中，Vue.js是一个非常优秀的框架。在Vue的使用过程中，我们可以看到，Vue中存在一个非常有用的函数watch()。通过这个函数，开发者们就可以很轻松地监听到app中自己定义的变量的变动，并及时做出相应地处理。

不过，一般的前端开发者在开发过程中，可以熟练地使用watch()函数监控app内的变量，但对于app外定义的变量却无能为力。

其实，如果想要在浏览器中模拟Vue监听一个变量，并不困难，利用ECMA5中Object对象的defineProperty()就可以轻松做到。

//定义一个被监听的对象，不过只能监听它的一个属性
var a = { prop:0 };
Object.defineProperty(a, 'prop', {
  get: function() {
      //监听prop属性的读取
    console.log('GET：' + watchValue);
    return prop;
  },
  set: function(value) {
      	//监听prop属性的变化
      	console.log('SET：' + value);
    	prop = value;
  }
});
console.log(a.prop)        // GET：0
a.prop++                // SET：1

【封装】

将监听封装成一个函数，以便以随时调用

let watchObj = function(obj, prop, setFun, getFun)
{
    Object.defineProperty(obj, prop, {
        get: function() {
            getFun(prop);
            return prop;
         },
        set: function(value) {
            prop = value
            setFun(value)
        }
    });
}

function getFun(value){
      console.log('GET：' + value);
}
function setFun(value){
      console.log('SET：' + value);
}

在一般的开发过程中，监听数据变化的应用场景会比监听数据读取的场景多很多，因此getFun一般用不上，可以给它一个默认的空方法；

另外，defineProperty()函数是ECMA5开始添加的，因此一般浏览器并不支持。如果想要使用，一般需要用到webpack等打包工具打包，而不能直接写到js文件中让浏览器执行。