微信小程序开发附源码：在微信小程序里使用watch和computed的方法

最新推荐文章于 2025-07-29 19:12:59 发布

原创

最新推荐文章于 2025-07-29 19:12:59 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

文章介绍了如何在微信小程序中模拟Vue的watch和computed特性，通过使用Object.defineProperty来监听数据变化，实现数据的自动更新。通过定义defineReactive函数和watch、computed方法，能够在数据改变时自动触发相关函数并更新界面。在处理同时使用watch和computed时，需要考虑避免重复定义和计算失效的问题，通过保存subs数组来解决这一问题。

在微信小程序里使用watch和computed的方法
在开发 vue 的时候，我们可以使用 watch 和 computed 很方便的检测数据的变化，从而做出相应的改变，但是在小程序里，只能在数据改变时手动触发 this.setData() ，那么如何给小程序也加上这两个功能呢？
我们知道在 vue 里是通过 Object.defineProperty 来实现数据变化检测的，给该变量的 setter 里注入所有的绑定操作，就可以在该变量变化时带动其它数据的变化。那么是不是可以把这种方法运用在小程序上呢？
实际上，在小程序里实现要比 vue 里简单，应为对于 data 里对象来说，vue 要递归的绑定对象里的每一个变量，使之响应式化。但是在微信小程序里，不管是对于对象还是基本类型，只能通过 this.setData() 来改变，这样我们只需检测 data 里面的 key 值的变化，而不用检测 key 值里面的 key 。
先上测试代码
{ { test.a }}
{ { test1 }}
{ { test2 }}
{ { test3 }}
change
const { watch, computed } = require('./vuefy.js')
Page({
data: {
test: { a: 123 },
test1: 'test1',
},
onLoad() {
computed(this, {
test2: function() {
return this.data.test.a + '2222222'
},
test3: function() {
return this.data.test.a + '3333333'
}
})
watch(this, {
test: function(newVal) {
c