微信小程序中使用watch监听

最新推荐文章于 2025-03-18 14:58:24 发布

singlever

最新推荐文章于 2025-03-18 14:58:24 发布

阅读量3.8k

点赞数 1

分类专栏：小程序开发文章标签：小程序

本文链接：https://blog.youkuaiyun.com/singlever/article/details/105122529

版权

小程序开发专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了在Vue中如何利用监听提升开发效率，包括在组件中实现数据监听的方法，使用defineProperty重构get和set，以及如何避免数据监听后的访问undefined问题。同时，探讨了在watch中直接使用setData进行数据同步的正确方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想直接使用的走这边 https://blog.youkuaiyun.com/singlever/article/details/106276787

Vue里面的监听很方便，虽然很消耗资源，但确实有些时候极大提升了开发效率

我的案例是写在component组件里面的，当然page页面也是一样的，把 attached 换成 onload
把 watch 直接写入 Page 里面即可

注意，使用defineProperty重构get和set之后，一定要写入get，不然会出现数据监听后赋值正常，但访问为undefined的情况

Component({
  properties: {},
  data: {
    // 这里是一些组件内部数据
    ze:'123',
    dd:'312'
  }, 
  methods: {
    watch(){
      return{
        ze:(val) => {
          console.log(val)
        }
      }
    },
    btns(){
      this.setData({ze:321})
    }
  },
  attached(){   //类似于beforeMounted 组件挂载前
    Object.keys(this.watch()).some(item => {
      Object.defineProperty(this.data,item,{
        set:this.watch()[item]
      })  
    })
  }
})

需要监听的变量，和vue的写法一样，写入watch中，不过，这里要加到 return 中即可例如例子 ze
如果监听需要调用到 this.setData() 把监听的函数结构换成箭头函数例如例子 ze

总的来说没有什么技术难点，主要依靠原生的Object APi Object.defineProperty() 没有学过的可以看下

跟进：
如果直接在watch中直接把val赋值给变量，这里只在逻辑层发生了变化，如果要将数据同步到视图层，在watch中直接setData会报错例如：

        ze:(val) => {
          this.setData({ze:val})
        }
//erorr

因为本质上watch中的ze函数是本质是个set，在一个变量的set中给自己赋值，这是个死循环，当然会报错，可能会有更好的办法
因为某些原因暂时没时间了，给出
方法1：

Component({
  properties: {},
  data: {
    // 这里是一些组件内部数据
    ze:'123', //逻辑层数据
    dd:'312', //视图层数据
  }, 
  methods: {
    watch(){
      return{
        ze:(val) => {
          this.setData({dd:val})
        }
      }
    }
  }

通过监听ze去改变dd，dd就相当于ze在视图层的替身，问题：1.变量浪费 2.不好看（hhh）

// 2020 5.22
抽空封装了下 https://blog.youkuaiyun.com/singlever/article/details/106276787