Vue js 的生命周期（看了就懂）(推荐)
更新时间：2019年03月29日 08:49:13 作者：193Eric
这篇文章主要介绍了Vue js生命周期，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用Vue框架，熟悉它的生命周期可以让开发更好的进行。
首先先看看官网的图，详细的给出了vue的生命周期:
它可以总共分为8个阶段：
- beforeCreate（创建前）,
- created（创建后）,
- beforeMount(载入前),
- mounted（载入后）,
- beforeUpdate（更新前）,
- updated（更新后）,
- beforeDestroy（销毁前）,
- destroyed（销毁后）
然后用一个实例的demo 来演示一下具体的效果：
<div id=app>{{a}}</div>
<script>
var myVue = new Vue({
el: "#app",
data: {
a: "Vue.js"
},
beforeCreate: function() {
console.log("创建前")
console.log(this.a)
console.log(this.$el)
},
created: function() {
console.log("创建之后");
console.log(this.a)
console.log(this.$el)
},
beforeMount: function() {
console.log("mount之前")
console.log(this.a)
console.log(this.$el)
},
mounted: function() {
console.log("mount之后")
console.log(this.a)
console.log(this.$el)
},
beforeUpdate: function() {
console.log("更新前");
console.log(this.a)
console.log(this.$el)
},
updated: function() {
console.log("更新完成");
console.log(this.a);
console.log(this.$el)
},
beforeDestroy: function() {
console.log("销毁前");
console.log(this.a)
console.log(this.$el)
console.log(this.$el)
},
destroyed: function() {
console.log("已销毁");
console.log(this.a)
console.log(this.$el)
}
});
</script>
运行后，查看控制台，
得到这个：
然后再methods 里面添加一个change方法：
<div id=app>{{a}}
<button v-on:click="change">change</button>
</div>
点击按钮之后出现的是：
这就是vue的生命周期，很简单吧。
以上所述是小编给大家介绍的Vue js生命周期详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要给大家介绍了关于vue中跳转界面的3种实现方法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了详解Nuxt内导航栏的两种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
在我们使用Vue Element处理界面的时候，往往碰到需要利用JS集合处理的各种方法，如Filter、Map、reduce等方法，也可以涉及到一些对象属性赋值等常规的处理或者递归的处理方法，本篇随笔列出一些在VUE+Element 前端开发中经常碰到的JS处理场景，供参考学习。2021-05-05
本文主要介绍了ElementUI中el-tabs事件绑定的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决
Vue项目devServer.proxy代理配置详解的是一个非常常见的需求,下面这篇文章主要给大家介绍了关于vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决的相关资料,需要的朋友可以参考下2023-02-02
pinia，一个基于Vue3的状态管理库，它可以帮助开发人员管理Vue应用程序的状态，本文主要为大家介绍了Pinia的用法，感兴趣的小伙伴可以跟随小编一起学习一下2023-06-06
今天小编就为大家分享一篇使用vuex存储用户信息到localStorage的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue 最独特的特性之一,是其非侵入性的响应式系统,下面这篇文章主要给大家介绍了关于Vue响应式原理源码剖析的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue3自定义确认密码匹配验证规则的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了antd中table展开行默认展示,且不需要前边的加号操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论