在created 中用$watch监听不到globalData中的属性改变

在使用`$watch`监听`globalData`中的属性时，需要注意以下几点：

1. 确认`globalData`是否已经被挂载到了Vue的原型上，可以通过`Vue.prototype.$globalData`来访问。
2. 确认`globalData`中的属性是否已经被初始化，如果没有初始化，那么`$watch`是无法监听到属性的变化的。
3. 在`created`中使用`$watch`需要注意，`$watch`是在组件实例创建之后才会被调用，也就是说，在`created`中使用`$watch`时，需要先将`globalData`中的属性赋值给组件实例中的一个变量，然后再使用`$watch`监听这个变量的变化。

以下是一个示例代码：

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`监听这个变量的变化。

以下是一个示例代码：

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`，以确保组件已经渲染完毕。例如：

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）：计算属性的值可以根据其他数据的变化而变化，它们会缓存计算结果，只有在相关数据变化时才会重新计算。因此，可以通过计算属性来监听数据的变化。例如：

   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`不同的是，监听器可以监听多个数据的变化，并且可以在数据变化时执行复杂的逻辑。例如：

   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`不同的是，侦听器可以监听多个数据的变化，并且可以在数据变化时执行复杂的逻辑。例如：

   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还提供了多种监听数据变化的方式，可以根据具体的情况选择合适的方式来监听数据的变化。