这篇文章主要为大家展示了“js中如何实现vue.watch”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js中如何实现vue.watch”这篇文章吧。
getter和setter
getter 是一种获得属性值的方法，setter是一种设置属性值的方法。
属性被赋值 a = 1的时候, a 的原型内的setter就会被触发；
而 console.log(a) 的时候，a 的原型内的getter就会被触发。
实现getter和setter
我们不能直接给变量的setter和getter 绑定事件函数，为了实现绑定我们要借助Object对象来构造带有setter和getter的属性。
这里有前辈总结的 几种实现getter和setter的方法，而且他还总结了一些Object.prototype内控制属性枚举的特性的隐式属性。
我这里选用了比较好构造的一种 Object.defineProperty
概要
Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。
语法
Object.defineProperty(obj, prop, descriptor)
参数
obj
需要定义属性的对象。
prop
需被定义或修改的属性名。
descriptor
需被定义或修改的属性的描述符。
第一个参数，被构造的属性的this指向的对象
第二个参数，被构造的属性名
第三个参数，构造的规则（上面的文字链接最后面有介绍）
(function () {
var o = { a : 1}//声明一个对象,包含一个 a 属性,值为1
Object.defineProperty(o,"b",{
get: function () {
return this.a;
},
set : function (val) {
this.a = val;
},
configurable : true
});
console.log(o.b);//==> 1
o.b = 2;
console.log(o.b);//==> 2
})();configurable是指 "b" 是否可以被再配置，默认是false。false的话
Object.defineProperty(o,"a",{set : function(val){}} );
再修改时会不起作用或者报错，一般默认false。
构造我们的vue.watch
目标实现，以下是我们想要的达到的效果
import watcher from './watcher.js';
let wm = new watcher({
data:{
a: 0
},
watch:{
a(newVal,oldVal){
console.log('newVal:'+newVal);
console.log('oldVal:'+oldVal);
}
}
})
vm.a = 1
// newVal:1
// oldVal:0创建构造对象
class watcher{
constructor(opts){
this.$data = opts.data;
for(let key in opts.data){
this.setData(key,opts.data[key])
}
}
setData(_key,_val){
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;
return val;
},
});
}
}
export default watcher;添加 watch事件触发
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;为了函数内部的健壮性，getBaseType是用来做类型校验的。
Object.defineProperty(this),this把上下文指向当前对象。
this.$watch[_key].call(this,val,oldVal),把监听事件的上下文页绑定到当前对象，方便在watch内通过this获取对象内的值，如下
let wm = new watcher({
data:{
a: 0,
b: 'hello'
},
watch:{
a(newVal,oldVal){
console.log(this.b);
}
}
})总结
有人可能会问为什么不直接用vue呢。你也知道vue是一个工程级别的框架，做比较大的项目当然是用vue，react；但是单单做一个展示性的官网或者做个移动端的H5宣传页也用上vue吗？那当然是没有必要的。
用上这一个watcher类，可以让你页面的状态控制有条理、有迹可循。
比如几个按钮联动一个或几个视图的改变和动效的时候，你就不用在每个按钮的click时都触发一下修改
btn1.onclick=function(){
var a = 'haha';
document.getElementById('id').innerHTML = a;
}
btn2.onclick=function(){
var a = 'xixi';
document.getElementById('id').innerHTML = a;
}
let wm = new watcher({
data:{
a: "",
},
watch:{
a(newVal,oldVal){
document.getElementById('id').innerHTML = newVal;
}
}
})
btn1.onclick=function(){
wm.a = 'haha';
}
btn2.onclick=function(){
wm.a = 'xixi';
}以上是“js中如何实现vue.watch”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
