怎么在JavaScript中利用watch监听数据变化
本篇文章为大家展示了怎么在JavaScript中利用watch监听数据变化,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联公司是一家专业提供阿巴嘎企业网站建设,专注与成都做网站、网站设计、外贸营销网站建设、成都h5网站建设、小程序制作等业务。10年已为阿巴嘎众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
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
wathc
3. 给vm.a 从新赋值 就能看到 newVal 和oldVal的变化
上述内容就是怎么在JavaScript中利用watch监听数据变化,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
文章名称:怎么在JavaScript中利用watch监听数据变化
当前链接:http://myzitong.com/article/pjscdg.html