小程序在page中使用数据监听(不需要setData)

小程序在page中使用数据监听(不需要setData)

众所周知，在小程序中如果想要监听数据，必须得使用组件 Component，它提供了observers 方法用来监听数据变化。但是，其中比较让人不舒服的是，它监听的仅仅是 setData 之后变化的数据。一般来说，在小程序中有些数据是不需要setData 渲染的，比如：input事件，输入框中本身已经展示了数据，是不需要再使用 value 绑定的。

那么问题来了，既然不 setData，那我要是想让另一个数跟着它变怎么办，比如说：我在输入框输入一个数字，它要在上方给我显示它的平方。这个实现起来很简单——将输入的值平方一下再 setData 呗。好吧，这种方法的确可以实现，但是，这样做太弟弟了。（至于为什么太弟弟了，因为不这样说我没办法引出watch数据监听）

大家应该都知道， vue2 中使用 Object.defineProperty 数据劫持来进行双向绑定。那实现 watch 的原理也就呼之欲出了。 Object.defineProperty 中我们用到的属性只需要 set 和 get。不多累述，其余的几个属性可以自行搜索。

const obj = {
   james:99,melo:97,wade:98,paul:96}
let val
Object.defineProperty(obj,'melo',{
   
    get(){
   
        return val
    },
    set(new_){
   
        console.log('melo的值发生了改变',new_)
        val = new_
    }
})
//---------------------------------

obj.melo = 80

//Output: melo的值发生了改变80

从上面可以看到，当监听的数据发生改变时，set() 就会通知我们，所以，只需要在 set 中添加一个回调函数就可以将改变后的值回调给我们了。下面我们改变 obj 的深度来尝试一下。

const obj = {
   
    james:{
   
        Miami:{
   first:99