标签：... 生命周期 console log 这篇 vue data
写这章博客不是为了要获得多少赞，主要是利用vue开发项目时踩的坑太多了。自己曾不理解或者遇到的问题再这里搞清楚，不想后来的人再遇到这样的坑，做技术的要懂得分享，做人嘛，最重要的是开心。
vue官网说，“你暂时不用搞清楚这些...",我觉得你既然准备用vue做开发的，不搞懂搞透它，你以后会发现踩的坑终究还是有它引起的，等以后再来补坑，不如现在就拿下它。
以下主要从几个方面来讲：
1.vue的生命周期是什么
2.vue生命周期的在项目中的执行顺序
3.vue中内置的方法 属性和vue生命周期的运行顺序（methods、computed、data、watch）
4.自己构造的方法与vue生命周期的运行顺序 如show这些
5.总结
一、vue的生命周期是什么
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:
beforeCreate
created
beforeMount
mounted
(
beforeUpdate
updated
)
beforeDestroy
destroyed
对应的中文就如其字面意思，英文不好的童鞋可以有道翻翻
好了，这里要上图啦~~~
二、vue生命周期的在项目中的执行顺序
...
data () {
return {
rendered: false,
}
}
...
1.beforeCeate(){
console.log(this.rendered); // undefined
}
2.created() {
console.log(this.$el);//undefined
console.log(this.rendered); // false
}
3.beforeMount() {
console.log(this.$el)；//undefined
}
4.mounted() {
console.log(this.$el);
}
5.beforeDestroy(){
console.log(this.$el);
console.log(this.rendered);
}
6.destroyed() {
console.log(this.$el);
console.log(this.rendered);
}
三、vue中内置的方法 属性和vue生命周期的运行顺序（methods、computed、data、watch、props)
从第一二点可知道data的初始化是在created时已经完成数据观测(data observer)，并且诸如methods、computed属性 props等已经初始化；那问题来了，
data props computed watch methods他们之间的生成顺序是什么呢？
根据翻看vue源码可知：
props => methods =>data => computed => watch; 懂了没
四、自己构造的方法与vue生命周期的运行顺序 如show这些
往往我们在开发项目时都经常用到 $refs 来直接访问子组件的方法，但是这样调用的时候可能会导致数据的延迟滞后的问题，则会出现bug。
解决方法则是推荐采取异步回调的方法，然后传参进去，严格遵守vue的生命周期就可以解决 推荐 es6 的promise。
示例代码：
handleAsync () {
return new Promise(resolve=>{
const res="";
resolve(res)
})
}
...
async handleShow() {
await this.handleAsync().then(res=>{
this.$refs.child.show(res);
})
}
...
五、总结
vue 的生命周期，总得来说就是实例的创建和销毁这段时间的一个机制吧。也是vue框架的数据间的交互通信。其实现在看来也没那么难，但是vue的源码实现这一套机制那是难得一逼，涉及到复杂的算法如diff算法，有兴趣的童鞋可以去深入了解一下。
标签：...,生命周期,console,log,这篇,vue,data 来源： https://www.cnblogs.com/coderwhytop/p/14803887.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。