vue watch实现

àì夳堔傛蜴生んèń 2023-06-29 10:50 20阅读 0赞

vue双向绑定是建立在，给每个属性建立了getter与setter，在属性被改变的同时，触发视图再渲染  
getter是一种获取属性值的方法，setter是一种设置属性值的方法。  
当属性,a = 1被触发时，setter被触发，console.log(a)则getter被触发

### 实现setter与getter ###

> Object.defineProperty方式

Object.defineProperty(obj, prop, descriptor)有三个参数，解释如下：  
第一个参数，被构造的属性的this指向的对象  
第二个参数，被构造的属性名  
第三个参数，构造的规则（上面的文字链接最后面有介绍）

configurable是指 “b” 是否可以被再配置，默认是false。false的话

Object.defineProperty(o,“a”,\{set : function(val)\{\}\} ); 再修改时会不起作用或者报错，一般默认false。

### 构建vue watch ###

**目标实现，以下是我们想要的达到的效果：**

*  watcher.js

class watcher{ 
        constructor(opts){ 
            this.$data = opts.data;
            this.$watch = opts.watch || { };
            for(let key in this.$data){ 
                this.setData(key, opts.data[key]);
            }
        }
        setData(_key, _val){ 
            Object.defineProperty(this, _key, { 
                get:function(){ 
                    return this.$data[key]
                },
                set: function(val){ 
                    let oldVal = this.$data[_key];
                    if(val === oldVal){ 
                        return val
                    }
                    this.$data[_key] = val;
                    this.$watch[_key] && typeof(this.$watch[_key]) == 'function' &&(
                        this.$watch[_key].call(this, val, oldVal)
                    )
                    return val;
                }
            })
        }
    }

### 总结 ###

你也知道vue是一个工程级别的框架，做比较大的项目当然是用vue，react；但是单单做一个展示性的官网或者做个移动端的H5宣传页也用上vue吗？那当然是没有必要的。

用上这一个watcher类，可以让你页面的状态控制有条理、有迹可循。