Vue的data去哪儿了？生命周期寻宝记

大家好，我是小杨，做了快6年前端的老油条了。今天咱们来聊聊Vue中一个看似简单却容易让人迷糊的问题------data到底是在生命周期的哪个阶段出现的？

一、先来个灵魂拷问

我刚学Vue的时候，经常被一个问题困扰：我在data里定义的数据，到底什么时候才能用？为什么有时候在created里能访问到，有时候又不行？今天咱们就把这个谜题彻底解开！

二、data的生命周期之旅

先看个简单例子：

javascript 复制代码

new Vue({
  el: '#app',
  data() {
    return {
      myName: '我是小杨',
      age: 28
    }
  },
  beforeCreate() {
    console.log(this.myName) // undefined
    console.log(this.age)   // undefined
  },
  created() {
    console.log(this.myName) // "我是小杨"
    console.log(this.age)   // 28
  }
})

看到没？data在不同生命周期钩子中的表现完全不同！

三、data的诞生时刻

通过上面例子，其实已经能看出端倪了。但为了更清楚，咱们来看下Vue实例的创建流程：

beforeCreate：这时候Vue实例刚初始化，但data还没初始化！所以访问this.xxx都是undefined
data初始化：在beforeCreate和created之间，Vue会做一件重要的事------初始化data！
created：这时候data已经准备好了，可以愉快地使用了

四、实际开发中的坑

记得我刚工作时遇到过这样一个问题：

javascript 复制代码

export default {
  data() {
    return {
      userList: []
    }
  },
  created() {
    this.fetchUserList()
  },
  methods: {
    fetchUserList() {
      axios.get('/api/users').then(res => {
        this.userList = res.data
      })
    }
  },
  mounted() {
    console.log(this.userList) // 这里打印什么？
  }
}

你们猜mounted里打印的是什么？空数组！因为ajax请求是异步的，这时候数据可能还没返回。这就是不理解生命周期导致的常见错误。

五、最佳实践建议

根据我的经验，给大家几个建议：

数据初始化放在created阶段最合适
DOM操作要等到mounted之后
异步数据要注意生命周期时序，必要时用watch或Promise处理
复杂数据可以在beforeCreate中提前准备

六、总结

记住这个简单的规律：

beforeCreate：data不存在
created开始：data可以使用了
mounted之后：data和DOM都准备好了

理解了这个，你就掌握了Vue数据绑定的第一把钥匙！

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！