本篇文章为大家展示了怎么在JavaScript中利用watch监听数据变化，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联网站建设公司一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！专注中小微企业官网定制，成都网站制作、成都做网站，塑造企业网络形象打造互联网企业效应。JavaScript的特点

1.JavaScript主要用来向HTML页面添加交互行为。 2.JavaScript可以直接嵌入到HTML页面，但写成单独的js文件有利于结构和行为的分离。 3.JavaScript具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。

1.js

 
class watcher{
 constructor(opts){
  this.$data = this.getBaseType(opts.data) === 'Object' ? opts.data : {};
  this.$watch = this.getBaseType(opts.watch) === 'Object' ? opts.watch : {};
  for(let key in opts.data){
   this.setData(key)
  }
 }
 
 getBaseType(target) {
  const typeStr = Object.prototype.toString.apply(target);
  
  return typeStr.slice(8, -1);
 }
 
 setData(_key){
  Object.defineProperty(this,_key,{
   get: function () {
    return this.$data[_key];
   },
   set : function (val) {
    const oldVal = this.$data[_key];
    if(oldVal === val)return val;
    this.$data[_key] = val;
    this.$watch[_key] && typeof this.$watch[_key] === 'function' && (
     this.$watch[_key].call(this,val,oldVal)
    );
    return val;
   },
  });
 }
}
 
// export default watcher;

2.html

　3. 给vm.a 从新赋值 就能看到 newVal 和oldVal的变化

上述内容就是怎么在JavaScript中利用watch监听数据变化，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

网站栏目：怎么在JavaScript中利用watch监听数据变化-创新互联
转载来于：http://myzitong.com/article/iegps.html