微信小程序组件（Component）中observes的使用

最新推荐文章于 2024-04-20 13:14:02 发布

ꪜ776

最新推荐文章于 2024-04-20 13:14:02 发布

阅读量1.4k

点赞数 8

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_64052334/article/details/135504753

版权

1. 如果是监测items.foo 只能监测foo的当前层，其他任何层都监测不到，下图所示：


Component({
  data: {
    items: {
      foo: {
        name: '张三',
        age: 123,
        likes: {
          name: '郭亮'
        }
      },
      bar: {
        name: '李四',
        age: 14
      }
    },
  },

  // 监听 items 数据的变化
  observers: {
  // 局部监听 items 数据的变化
    'items.foo': function (newVal) {
      console.log(JSON.stringify(newVal));
    }
  },

  methods: {
    // 增加 items 值的函数
    add() {
      //不会被监听到，因为只能监测foo当前层，likes属于foo的下一层，所以监测不到
      this.setData({
        'items.foo.likes': {
          name: '小明'
        },
      });
      //会被监听到，因为在foo当前层，所以可以监测到
      this.setData({
        'items.foo': {
          name: 'asdf',
          age: 77
        },
      });
      //不会被监听到，因为不在foo当前层，所以不可以监测到
      this.setData({
        'items.bar': {
          name: 'zcxv',
          age: 99
        },
      });
      //不会被监听到，因为不在foo当前层，所以不可以监测到
      this.setData({
        'items.abc': {
          name: 'wangwu',
          age: 90
        }
      });
      // console.log(this.data.items);
    },
  }
});

2.如果是监测items.** ，能监测items下的所有层级，相当于深度监听，下图所示：


Component({
  data: {
    items: {
      foo: {
        name: '张三',
        age: 123,
        likes: {
          name: '郭亮'
        }
      },
      bar: {
        name: '李四',
        age: 14
      }
    },
  },

  // 监听 items 数据的变化
  observers: {
    // 深度监听items的数据变化
    'items.**': function (newVal) {
      console.log(JSON.stringify(newVal));
    }
  },

  methods: {
    // 增加 items 值的函数
    add() {
      //会被监听到，因为可以监听items下所有层
      this.setData({
        'items.foo.likes': {
          name: '小明'
        },
      });
      //会被监听到，因为可以监听items下所有层
      this.setData({
        'items.foo': {
          name: 'asdf',
          age: 77
        },
      });
      //会被监听到，因为可以监听items下所有层
      this.setData({
        'items.bar': {
          name: 'zcxv',
          age: 99
        },
      });
      //会被监听到，因为可以监听items下所有层
      this.setData({
        'items.abc': {
          name: 'wangwu',
          age: 90
        }
      });
      // console.log(this.data.items);
    },
  }
});