uniapp 中监听全局属性的方式都有几种
时间: 2023-11-28 15:04:52 浏览: 465
在uni-app中,可以通过以下几种方式来监听全局属性的变化:
1. 使用`$watch`:与在Vue.js中使用`$watch`监听数据变化的方式类似,在uni-app中也可以使用`$watch`来监听全局属性的变化。需要注意的是,在uni-app中,全局属性是挂载在`uni`对象上的,所以需要使用`uni.$globalData`来访问全局属性。例如:
```javascript
export default {
created() {
this.$watch(() => uni.$globalData.prop, (newValue, oldValue) => {
console.log('globalData.prop has changed');
});
}
}
```
2. 使用`uni.$on`:`uni`对象也提供了类似于Vue.js中的事件总线的功能,可以使用`uni.$on`来监听全局事件。可以在全局属性变化的时候触发相应的全局事件,在需要监听的组件中使用`uni.$on`来监听该事件。例如:
```javascript
export default {
created() {
uni.$on('globalData.propChanged', () => {
console.log('globalData.prop has changed');
});
},
destroyed() {
uni.$off('globalData.propChanged');
}
}
```
需要注意的是,在组件销毁的时候需要使用`uni.$off`来移除监听器,以避免内存泄漏。
3. 使用`uni.$watch`:uni-app还提供了`uni.$watch`方法来监听数据变化,与在Vue.js中使用`$watch`监听数据变化的方式类似。需要注意的是,在uni-app中,全局属性是挂载在`uni`对象上的,所以需要使用`uni.$globalData`来访问全局属性。例如:
```javascript
export default {
created() {
uni.$watch(() => uni.$globalData.prop, (newValue, oldValue) => {
console.log('globalData.prop has changed');
});
}
}
```
综上所述,uni-app中可以使用多种方式来监听全局属性的变化,可以根据具体的情况选择合适的方式来监听全局属性的变化。
阅读全文