在created 中用$watch监听不到globalData中的属性改变
时间: 2024-02-13 22:02:46 浏览: 65
在使用`$watch`监听`globalData`中的属性时,需要注意以下几点:
1. 确认`globalData`是否已经被挂载到了Vue的原型上,可以通过`Vue.prototype.$globalData`来访问。
2. 确认`globalData`中的属性是否已经被初始化,如果没有初始化,那么`$watch`是无法监听到属性的变化的。
3. 在`created`中使用`$watch`需要注意,`$watch`是在组件实例创建之后才会被调用,也就是说,在`created`中使用`$watch`时,需要先将`globalData`中的属性赋值给组件实例中的一个变量,然后再使用`$watch`监听这个变量的变化。
以下是一个示例代码:
```javascript
export default {
created() {
const globalDataProp = this.$globalData.prop;
this.prop = globalDataProp; // 先将属性赋值给组件实例中的变量
this.$watch('prop', (newValue, oldValue) => {
console.log('globalData.prop has changed');
});
}
}
```
相关问题
uniapp 在created 中用$watch监听不到globalData中的属性改变
在uni-app中使用`$watch`监听`globalData`中的属性时,需要注意以下几点:
1. 确认`globalData`是否已经被挂载到了`uni`对象上,可以通过`uni.$globalData`来访问。
2. 确认`globalData`中的属性是否已经被初始化,如果没有初始化,那么`$watch`是无法监听到属性的变化的。
3. 在`created`中使用`$watch`需要注意,`$watch`是在组件实例创建之后才会被调用,也就是说,在`created`中使用`$watch`时,需要先将`globalData`中的属性赋值给组件实例中的一个变量,然后再使用`$watch`监听这个变量的变化。
以下是一个示例代码:
```javascript
export default {
created() {
const globalDataProp = uni.$globalData.prop;
this.prop = globalDataProp; // 先将属性赋值给组件实例中的变量
this.$watch('prop', (newValue, oldValue) => {
console.log('globalData.prop has changed');
});
}
}
```
需要注意的是,uni-app中使用`$watch`时,需要在`this.$nextTick()`中使用`$watch`,以确保组件已经渲染完毕。例如:
```javascript
export default {
created() {
this.$nextTick(() => {
const globalDataProp = uni.$globalData.prop;
this.prop = globalDataProp; // 先将属性赋值给组件实例中的变量
this.$watch('prop', (newValue, oldValue) => {
console.log('globalData.prop has changed');
});
});
}
}
```
除了$watch 还有什么可以监听
除了使用`$watch`来监听Vue实例的数据变化,还有以下几种方式可以监听数据的变化:
1. 计算属性(Computed):计算属性的值可以根据其他数据的变化而变化,它们会缓存计算结果,只有在相关数据变化时才会重新计算。因此,可以通过计算属性来监听数据的变化。例如:
```javascript
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe',
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
},
created() {
this.$watch('fullName', (newValue, oldValue) => {
console.log('fullName has changed');
});
}
}
```
2. 监听器(Watcher):监听器可以监听数据的变化,并在变化时执行相应的回调函数。与`$watch`不同的是,监听器可以监听多个数据的变化,并且可以在数据变化时执行复杂的逻辑。例如:
```javascript
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe',
}
},
watch: {
firstName(newValue, oldValue) {
console.log('firstName has changed');
},
lastName(newValue, oldValue) {
console.log('lastName has changed');
}
}
}
```
3. 侦听器($watch):在Vue.js 2.x版本中,除了使用`$watch`来监听数据的变化外,还可以使用`$watch`的替代方案——侦听器。侦听器可以监听数据的变化,并在变化时执行相应的回调函数。与`$watch`不同的是,侦听器可以监听多个数据的变化,并且可以在数据变化时执行复杂的逻辑。例如:
```javascript
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe',
}
},
created() {
this.$watch(
() => [this.firstName, this.lastName],
([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
console.log('fullName has changed');
}
);
}
}
```
综上所述,除了`$watch`之外,Vue.js还提供了多种监听数据变化的方式,可以根据具体的情况选择合适的方式来监听数据的变化。
阅读全文