小程序中使用watch Ⅱ，已封装完成

在上一篇watch详解中解释了watch 的原理   链接

这次是我抽空完整封装好的demo

效果：

页面中代码写法：

函数触发前：

函数触发后：

 

具体效果描述：写法与vue中的写法相同，个人做了单向绑定，修改被监听的参数，会同步到视图层

 

如何使用

1.在项目文件目录下创建一个存储外部脚本的文件夹  例：single

 

2.创建一个js文件，并且写入以下代码 例：watch.js

写入代码

let singlever = {
    watch(_this,state) {
        if (!_this) { throw 'page对象不存在' }
        let subsitute = {}
        let watchFunc = _this.watch
        if(watchFunc.constructor === Function){     //非page构造
            console.info('非Page页面,使用组件加载模式')
            watchFunc = _this.watch()
        }
        Object.keys(watchFunc).some(item => {
            if(watchFunc[item].constructor === Array){throw `监听数据 ${item} 格式有问题`}
            if(!_this.data[item]){throw `被监听数据 ${item} 不存在`}
            if(watchFunc[item].constructor === Object){
                console.log('数据为object')
                Object.defineProperty(_this.data, item, {
                    set: function (val) {
                        if (subsitute['single_' + item] === val) { return }
                        subsitute['single_' + item] = val
                        _this.setData({ [item]: val })
                        watchFunc[item].set(val)
                    },
                    get:watchFunc[item].get
                })
            }else{
                Object.defineProperty(_this.data, item, {
                    set: function (val) {
                        if (subsitute['single_' + item] === val) { return }
                        subsitute['single_' + item] = val
                        _this.setData({ [item]: val })
                        watchFunc[item](val)
                    }
                })
            }
        })
    }
}

module.exports = singlever

 

3.在小程序入口js文件 app.js 文件中引入 

 

4.对其进行封装

 

5.封装完毕后，可对其进行调用，因为不同类型的页面构造函数不一样，所以引入的写法不一样，

（所有的页面都要先通过getApp函数获取的App对象再调用其封装的方法）

正常的Page中：

推荐在onLoad中调用

  onLoad: function (options) {
    const app = getApp()
    app.watch(this)
  },

完整的写法 在Page构造的页面中watch的写法和vue一样，与data同级

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    aaa: 123
  },
  watch:{
    aaa(val){
      console.log('page函数',val)
    }
  },
  onLoad: function (options) {
    app.watch(this)
  },
  onShow: function () {

  },
})

 

组件Component中写法：

推荐在ready中调用

  ready(){   //类似于beforeMounted 组件挂载前
    const app = getApp()
    app.watch(this)
  },

完整的写法 在Component构造的组件页面中，需要将 watch 以函数的形式写入到 methods 中，并且用return返回

const app = getApp();
Component({
  data:{
    lll:123,
  },
  methods: {
    watch(){
      return{
        lll(val){
          console.log('lll改变成功')
        }
      }
    },
  },
  ready(){   //类似于beforeMounted 组件挂载前
    app.watch(this)
  },
})