使用 VueJS 创建生命周期挂钩问题答案

【问题标题】：Created lifecycle hook issue with VueJS使用 VueJS 创建生命周期挂钩问题
【发布时间】：2019-11-21 11:51:14
【问题描述】：

我有一个奇怪的问题，我不知道是 IDE 还是错字？我有以下代码，但我的 IDE 说创建的函数未使用，并且数据未从 firebase 加载。如果我在它上面输入另一个创建的生命周期钩子，它不会再显示未使用，但显然它抱怨它是重复的。请问我做错了什么？

    import db from '@/fb'
    import project from './project.vue'
    export default {
        data(){
            return {
                projects: []
            }
        },
        methods: {
          completed(tasks){
              let done = 0;
              for (const task of tasks)
              {
                  if(task.complete === true){
                      done ++;
                  }
              }
              return done;
          }
        },
        created(){
            db.collection('projects').onSnapshot(res => {
                const changes = res.docChanges();
                changes.forEach(change => {
                    if(change.type === 'added'){
                        this.projects.push({
                            ...change.doc.data(),
                            id: change.doc.id
                        })
                    }
                })
            })
        },
        components: {
            appProject: project
        }
    }

【问题讨论】：

你能给我一个stackblitz之类的吗？你的文件的扩展名是什么？
不知道 Stackblitz 有什么遗憾。这是一个 .vue 文件
@arielb 是 Vue.js 组件 *.vue 文件，<script> 部分。
结构没有问题。这是IDE的东西，你用的是什么IDE？

标签： vue.js

【解决方案1】：

你应该尝试定义它是一个函数。所以不要写created()，你应该写created: function()

   import db from '@/fb'
import project from './project.vue'
export default {
    data(){
        return {
            projects: []
        }
    },
    methods: {
      completed(tasks){
          let done = 0;
          for (const task of tasks)
          {
              if(task.complete === true){
                  done ++;
              }
          }
          return done;
      }
    },
    created: function(){
        db.collection('projects').onSnapshot(res => {
            const changes = res.docChanges();
            changes.forEach(change => {
                if(change.type === 'added'){
                    this.projects.push({
                        ...change.doc.data(),
                        id: change.doc.id
                    })
                }
            })
        })
    },
    components: {
        appProject: project
    }
}

阅读关于生命周期钩子的 vuejs.org/guide。

【讨论】：