微信小程序实现数据侦听器,类似vue的watch,替代Observer,微信小程序vue
微信小程序实现数据侦听器,类似vue的watch,替代Observer,微信小程序vue
背景
既然小程序的组件已经有Observer功能,那为什么还要手写watch功能呢?
实现
新建一个watch.js文件,代码如下
function watch(key, callback) {
// 先执行一次watch
callback.call(this, this.data[key])
let that = this
let tmpData = this.data[key]
Object.defineProperty(this.data, key, {
set: function(value) {
tmpData = value
// 值变化了再执行一次
callback.call(that, value)
},
get: function() {
return tmpData
}
})
}
export default watch
原理很简单,就是使用Object.defineProperty来定义要侦听的数据对象,当该值变化时,会执行其中的set方法,我们在set方法中执行侦听器回调就可以了。注:因为组件初始化的时候不会执行set方法,所以需要额外在开始的时候执行一次回调。
这个方法可以在Component的attached、ready函数中或者page的onShow、onLoad函数中使用。
Component中使用watch功能示例如下,Page中用法类似
import watch from '../../utils/watch.js'
Component({
properties: {
showPercent: {
type: Boolean,
value: true
},
percents: Array
},
attached: function() {
watch.call(this, 'percents', function (val) {
if (val && val.length >0) {
this.setData({
showPercent: true
})
} else {
this.setData({
showPercent: false
})
}
})
}
})
为了保证watch函数中的this指向,必须使用watch.call(this, ...arguments)的方式调用watch方法。这其中,第一个参数,this,固定写法;第二个参,数要watch的参数名;第三个参数,数值改变后执行的函数。
结语
实现了该watch方法,就可以解决开头说的两个问题了
文章最后发布于: 2019-10-25 11:47:14
评论暂时关闭