vue2生命周期执行顺序（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生命周期的在项目中的执行顺序

...

}

}

...

}

console.log(this.rendered); // false

}

}

}

console.log(this.rendered);

}

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。

示例代码：

resolve(res)

})

}

...

})

}

...

五、总结

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/72315.html