Vue.watch功能的使用及如何实现数据监听

在Vue中，数据监控是通过Object.defineProperty方法实现的。Vue通过劫持数据的getter和setter在内部监控和更新数据。

具体示例如下：

复制代码function watch(obj, key, callback) {
  var value = obj[key];
  Object.defineProperty(obj, key, {
    get: function() {
      return value;
    },
    set: function(newVal) {
      var oldVal = value;
      value = newVal;
      callback(newVal, oldVal);
    }
  });
}
 
var data = {
  message: 'Hello, Vue!'
};
 
watch(data, 'message', function(newVal, oldVal) {
  console.log('数据发生了变化：', newVal, oldVal);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21