微信小程序 组件属性中 observe的用法举例

在微信小程序的组件开发中，`observe`是一个用于监听组件属性变化的属性观察器。当组件属性的值发生变化时，`observe`会触发对应的回调函数。下面是一个示例，展示了如何在微信小程序中使用`observe`：

1. 在组件的js文件中定义属性和`observe`回调函数：

Component({
  properties: {
    // 定义一个属性
    text: {
      type: String,
      value: '',
      observer: function(newVal, oldVal) {
        // 监听属性变化的回调函数
        console.log('属性 text 的值从', oldVal, '变为', newVal);
      }
    }
  }
})

2. 在页面的wxml文件中引入组件，并绑定属性：

<view>
  <!-- 引入组件，并绑定属性 -->
  <my-component text="{{myText}}"></my-component>
</view>

3. 在页面的js文件中定义属性值并更新：

Page({
  data: {
    myText: 'Hello World'
  },
  onLoad: function() {
    // 延时更新属性值
    setTimeout(() => {
      this.setData({
        myText: 'Hello ChitGPT'
      });
    }, 2000);
  }
})

在以上示例中，组件定义了一个名为`text`的属性，并通过`observer`属性指定了一个回调函数。当`text`属性的值发生变化时，回调函数将被触发，并打印出新旧属性值。

在页面中引入该组件时，使用`text="{{myText}}"`将页面的`myText`属性绑定到组件的`text`属性上。初始值为`Hello World`。

在页面的`onLoad`生命周期函数中，通过`setData`方法更新了`myText`属性的值为`Hello ChitGPT`，并将值更新延时了2秒钟。

当属性值更新时，`observer`回调函数会被触发，并打印出新旧属性值。在这个例子中，2秒后控制台将会输出"属性 text 的值从 Hello World 变为 Hello ChitGPT"。

这样，通过使用`observe`可以监听组件属性的变化，并在回调函数中执行相应的操作。