uni-app Cannot read properties of undefined (reading '$vm')

uni-app Cannot read properties of undefined (reading ‘$vm’)

操作步骤：

index.js:16  
[Vue warn]: Unhandled error during execution of created hook  
at `<PageMeta>`  
at `<Index>`  
at `<View>`  
at `<Index>`  
at `<View>`  
at `<Index>`  
at `<View>`  
at `<View>`  
at `<View>`  
at `<View>`  
at `<View>`  
at `<Index>`  
at `<Index>`  
at `<AsyncComponentWrapper>`  
at `<PageBody>`  
at `<Page>`  
at `<Anonymous>`  
at `<KeepAlive>`  
at `<RouterView>`  
at `<Layout>`  
at `<App>`  
index.js:16  

TypeError: Cannot read properties of undefined (reading '$vm')  
at Proxy.created (page-meta.vue:100:25)  
at callWithErrorHandling (vue.runtime.esm.js:1418:33)  
at callWithAsyncErrorHandling (vue.runtime.esm.js:1425:17)  
at callHook$1 (vue.runtime.esm.js:4969:3)  
at applyOptions (vue.runtime.esm.js:4884:5)  
at finishComponentSetup (vue.runtime.esm.js:9089:7)  
at handleSetupResult (vue.runtime.esm.js:9040:3)  
at setupStatefulComponent (vue.runtime.esm.js:9009:7)  
at setupComponent (vue.runtime.esm.js:8941:36)  
at mountComponent (vue.runtime.esm.js:7265:7)

预期结果：

index.js:16
[Vue warn]: Unhandled error during execution of created hook
at <PageMeta>
at <Index>
at <View>
at <Index>
at <View>
at <Index>
at <View>
at <View>
at <View>
at <View>
at <View>
at <View>
at <Index>
at <Index>
at <AsyncComponentWrapper>
at <PageBody>
at <Page>
at <Anonymous>
at <KeepAlive>
at <RouterView>
at <Layout>
at <App>
index.js:16

TypeError: Cannot read properties of undefined (reading ‘$vm’)
at Proxy.created (page-meta.vue:100:25)
at callWithErrorHandling (vue.runtime.esm.js:1418:33)
at callWithAsyncErrorHandling (vue.runtime.esm.js:1425:17)
at callHook$1 (vue.runtime.esm.js:4969:3)
at applyOptions (vue.runtime.esm.js:4884:5)
at finishComponentSetup (vue.runtime.esm.js:9089:7)
at handleSetupResult (vue.runtime.esm.js:9040:3)
at setupStatefulComponent (vue.runtime.esm.js:9009:7)
at setupComponent (vue.runtime.esm.js:8941:36)
at mountComponent (vue.runtime.esm.js:7265:7)



## 实际结果：

index.js:16  
[Vue warn]: Unhandled error during execution of created hook  
at `<PageMeta>`  
at `<Index>`  
at `<View>`  
at `<Index>`  
at `<View>`  
at `<Index>`  
at `<View>`  
at `<View>`  
at `<View>`  
at `<View>`  
at `<View>`  
at `<View>`  
at `<Index>`  
at `<Index>`  
at `<AsyncComponentWrapper>`  
at `<PageBody>`  
at `<Page>`  
at `<Anonymous>`  
at `<KeepAlive>`  
at `<RouterView>`  
at `<Layout>`  
at `<App>`  
index.js:16  

TypeError: Cannot read properties of undefined (reading '$vm')  
at Proxy.created (page-meta.vue:100:25)  
at callWithErrorHandling (vue.runtime.esm.js:1418:33)  
at callWithAsyncErrorHandling (vue.runtime.esm.js:1425:17)  
at callHook$1 (vue.runtime.esm.js:4969:3)  
at applyOptions (vue.runtime.esm.js:4884:5)  
at finishComponentSetup (vue.runtime.esm.js:9089:7)  
at handleSetupResult (vue.runtime.esm.js:9040:3)  
at setupStatefulComponent (vue.runtime.esm.js:9009:7)  
at setupComponent (vue.runtime.esm.js:8941:36)  
at mountComponent (vue.runtime.esm.js:7265:7)

bug描述：

ionicwang 1楼•2 天前

在处理 uni-app 中的错误 “Cannot read properties of undefined (reading ‘$vm’)” 时，这通常意味着你尝试访问了一个未定义对象的 $vm 属性。这个错误可能发生在多种情况下，比如在使用某些插件、组件方法调用或者是在生命周期钩子中错误地访问了上下文。

以下是一些可能的情况和如何解决这些问题的代码示例：

1. 插件或第三方库使用不当

如果你在使用第三方插件或库，并且它们试图访问 $vm，确保你已经正确初始化并传递了 Vue 实例。例如，如果你在使用一个自定义的 Vue 插件：

// 插件定义
const MyPlugin = {
  install(Vue, options) {
    Vue.prototype.$myMethod = function () {
      console.log(this.$vm); // 这里的 this 已经是 Vue 实例了，通常不需要 $vm
    }
  }
}

// 在 main.js 中使用插件
Vue.use(MyPlugin);

// 在组件中调用
export default {
  mounted() {
    this.$myMethod(); // 正确使用插件方法
  }
}

2. 生命周期钩子中访问错误的上下文

确保在生命周期钩子中，你使用的是正确的 this 上下文。例如：

export default {
  data() {
    return {
      someData: null
    }
  },
  mounted() {
    // 正确使用 this 访问 Vue 实例的属性
    console.log(this.someData);
    // 假设有一个函数尝试访问 $vm，这通常是错误的
    // someFunctionThatTriesToReadVm(this.$vm); // 错误的使用
  },
  methods: {
    someFunction() {
      // 确保在方法内部也使用正确的 this
      console.log(this.someData);
    }
  }
}

3. 在组件外部错误地引用 Vue 实例

如果你在组件外部尝试访问 Vue 实例，确保你正确地获取了它。例如，如果你在一个全局的事件监听器中尝试访问 Vue 实例：

// 在 main.js 中
const app = new Vue({
  // ... options
});

// 假设你有一个全局事件监听器
window.addEventListener('someEvent', function(event) {
  // 这里不能直接访问 this.$vm，因为 this 不是 Vue 实例
  // 但你可以通过闭包或者将 Vue 实例传递给事件处理函数
  app.$emit('handleEvent', event); // 使用 Vue 实例的 $emit 方法
});

总之，当你遇到 “Cannot read properties of undefined (reading ‘$vm’)” 错误时，首先检查你的代码，确保你正确地引用了 Vue 实例，并且没有尝试访问未定义或错误上下文的属性。如果问题仍然存在，可能需要更详细地检查你的代码结构或查阅相关的文档和社区资源。