Vue中创建组件时如何实现一个功能？答案

【问题标题】：How to implement a function when a component is created in Vue?Vue中创建组件时如何实现一个功能？
【发布时间】：2016-12-09 16:49:40
【问题描述】：

根据docs，Vue对象的构造函数是这样管理的。

var vm = new Vue({
  created: function () { console.log("I'm created!"); }
});

但是，我不知道在创建 Vue 组件时如何做相应的事情。我尝试了以下方法，但没有打印到控制台。

export default {
  created: function() { console.log("Component created!"); }
}

是否可以订阅/收听正在呈现的组件？我想通过下载一些数据并将其放入存储中来对该事件做出反应，以便组件携带的表将获取其信息以显示。

【问题讨论】：

您的导出默认值是在 .vue 文件中作为 webpack 项目的一部分吗？在某些时候需要调用创建一个根 vue 实例，您可以导入在 .vue 文件中创建的组件。
@vbranden 回答您的问题 - 导出位于 .vue 文件中，我使用 webpack 管理我的捆绑/运行。另一部分，我没看懂。请解释一下好吗？
也许我不明白你的问题。您有一个根 Vue 实例和一个在其创建的钩子内有一个 console.log 的组件。您是否在项目中的某个时刻导入该组件并使用它？如果是这样，您应该会看到控制台日志
@vbranden 是的。我昨晚一定是做了什么迟钝的事。它似乎按我的预期执行。你是对的......如果你用链接和一些关于其他方法的简短信息（除了 created）重新发布你的评论，我很乐意接受它，甚至授予 +1。跨度>
这个问题你解决了吗？

标签： javascript vue.js vuex

【解决方案1】：

在我的应用程序中，我倾向于在组件安装后使用mounted 挂钩来加载一些Ajax 数据。

我的应用中的示例代码：

Vue.component('book-class', {
    template: '#booking-template',
    props: ['teacherid'],
    data: function () {
        return{
            // few data items returned here..
            message: ''
        }
    },
    methods: {
        // Few methods here..
    },
    computed: {
      // few computed methods here...
    },
    mounted: function () {


        var that = this;
        $.ajax({
            type: 'GET',
            url: '/classinfo/' + this.teacherid,
            success: function (data) {
                console.log(JSON.stringify(data));

            }
        })
    }
});


new Vue({
    el: '#mainapp',
    data: {
        message: 'some message here..'
    }
});

但是，我也可以在生命周期中使用 created() 钩子。

在 Vue2 中，您有以下生命周期钩子：

【讨论】：

这仅适用于 Vue 主组件的创建/挂钩。我正在寻找一种在创建/导入组件（任何组件、部分或子组件）时做事的方法。仍然为代码的努力+1。另外，我会删除图像并链接到它。它非常有用，但是太棒了。

【解决方案2】：

components 没有像 app.js 这样的生命周期钩子。但他们有类似的东西。这解决了我的问题： https://vuejs.org/v2/api/#updated

【讨论】：

咳咳……对于上面这张显示组件生命周期的图片，您有什么看法？我在这里错过了什么吗？
@KonradViltersten 图片是应用程序的生命周期，而不是组件的生命周期。评论没有那些钩子......