内容简介:生命周期是理解Vue的一个非常重要的环节,初学Vue时可能会出现数据渲染的失败的错误,因此打算写两篇博客详细介绍Vue的生命周期:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用;data、computed、watch、methods和DOM都不能使用如果非要在beforeCreate()取data也不是没有办法,异步方式可以通过
生命周期是理解Vue的一个非常重要的环节,初学Vue时可能会出现数据渲染的失败的错误,因此打算写两篇博客详细介绍Vue的生命周期:
- 单个组件的Vue生命周期(本文)
- 多个组件的Vue生命周期
Vue生命周期
1.1 beforeCreate()
说明
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用;data、computed、watch、methods和DOM都不能使用
data () { return { msg: 1 } }, beforeCreate() { console.log(this.$data) //undefined console.log(this.$el) //undefined } 复制代码
注意
如果非要在beforeCreate()取data也不是没有办法,异步方式可以通过 this.$nextTick()或seTimeout
,同步方式可以通过 this.$options
。当然一般不会这么操作。
beforeCreate() { this.$nextTick(() => { console.log(this.msg) //1 }) setTimeout(()=> { console.log(this.msg) //1 }, 1000) console.log(this.$options.data()["msg"]) //1 } 复制代码
1.2 created()
说明
在实例创建完成后被立即调用,可以操作data、computed、watch、methods,但DOM还没挂载,不能操作。
created () { this.getMsg() //1 console.log(this.msg) //1 console.log(this.$el) //undefined }, methods: { getMsg() { console.log(this.msg) } } 复制代码
通常在此进行页面初始化操作或简单的Ajax请求(此时页面还未呈现,过多的请求会导致白屏)
1.3 beforeMount()
说明
在挂载开始之前被调用:相关的 render 函数首次被调用。这一步没啥特别的,很少在此进行操作。
beforeMount() { console.log(this.msg) //1 console.log(this.$el) //undefined } 复制代码
1.4 mounted()
说明
实例被挂载到DOM上。通常用于执行Ajax请求。
mounted() { console.log(this.msg) //1 console.log(this.$el) //可看到 DOM 的信息 } 复制代码
注意
mounted 不保证所有子组件都一起被挂载了。若想要等整个视图都渲染完毕再操作,可以使用 this.$nextTick
mounted() { this.$nextTick() } 复制代码
1.5 beforeUpdate()
只有数据更新时才调用,发生在虚拟 DOM 打补丁之前。适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
<div>{{msg}}</div> 复制代码
mounted() { this.msg = 2 }, beforeUpdate: function() { console.log(this.$el.innerHTML) //1 console.log(this.$el) //<div ...> 2 </div> console.log(this.msg) //2 } 复制代码
1.6 updated()
说明
虚拟 DOM 重新渲染和打补丁之后调用,组件DOM已经更新,可以执行依赖于DOM的操作。
mounted() { this.msg = 2 }, updated: function() { console.log(this.$el.innerHTML) //2 console.log(this.$el) //<div ...> 2 </div> console.log(this.msg) //2 } 复制代码
注意
updated 不保证所有子组件都被重绘了。若想要等到整个视图都重绘完毕再操作,可以用 this.$nextTick
1.7 beforeDestroy()
说明
实例销毁前调用,这里没什么特殊的,该用的仍然可用
beforeDestroy() { console.log(this.msg) //2 console.log(this.$el) //<div ...> 2 </div> } 复制代码
1.8 destroyed()
说明
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
这里我一开始的理解是数据不能用了,结果还依然打印了数据,不解中……
destroyed() { console.log(this.msg) //2 console.log(this.$el) //<div ...> 2 </div> } 复制代码
总结
Vue的生命周期可以总结为3个阶段:
- 初始化阶段(执行1次):beforeCreate、created、beforeMount、mounted
- 数据更新阶段(执行多次):beforeUpdate、updated
- 销毁阶段/切换组件(执行1次):beforeDestory、destroyed
- 用得比较多的就是 created 和 mounted 了
以上所述就是小编给大家介绍的《详解Vue生命周期【上】》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。