Vue/Nuxt - 运行渲染整个视图后的代码？

Question

我想在整个视图渲染完成后创建一些函数/mounted:

export default {
  mounted: function () {
    this.example = function() {
      return 'example'
    },
    function() {
      console.log('mounted') // does not work
    }
  },
  created () {
    console.log(this.example()) // error
  },
  methods: {
    submitMessage() {
      console.log(this.example()) // example
    }
  }
}

为什么我在 created() 收到以下错误？

TypeError: this.example is not a function
    at VueComponent.created (index.vue:119)
    at callHook (vue.runtime.esm.js:2661)
    at VueComponent.Vue._init (vue.runtime.esm.js:4222)
    at VueComponent (vue.runtime.esm.js:4392)
    at createComponentInstanceForVnode (vue.runtime.esm.js:3674)
    at init (vue.runtime.esm.js:3491)
    at createComponent (vue.runtime.esm.js:5143)
    at createElm (vue.runtime.esm.js:5086)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js:5602)
    at VueComponent.Vue._update (vue.runtime.esm.js:2420)

有什么想法吗？

Answer 1

created 挂钩在 mounted 挂钩之前被称为 。 created()函数运行时，this.example还没有声明。

您可以在声明后调用this.created()。

参考lifecycle diagram.

Vue/Nuxt - 运行渲染整个视图后的代码？

Vue/ Nuxt - run code after the entire view has been rendered?

vue.js

vuejs2

nuxt.js

Vue/Nuxt - 运行 渲染整个视图后的代码？

Vue/ Nuxt - run code after the entire view has been rendered?

vue.js

vuejs2

nuxt.js

Vue/Nuxt - 运行渲染整个视图后的代码？