Vue基础精讲 —— 实例解析Vue的生命周期
程序员文章站
2024-03-23 15:46:04
...
结合官网Vue生命周期图例,实例生命周期钩子
// vue生命周期
import Vue from 'vue'
new Vue({
el: '#root',
template: '<div>{{text}}</div>',
data: {
text: 'text'
},
beforeCreate () {
// 无法做dom节点操作
console.log(this.$el, 'beforeCreate')
},
created () {
// 无法做dom节点操作
console.log(this.$el, 'created')
},
beforeMount () {
console.log(this.$el, 'beforeMount')
},
mounted () {
// 一般做dom相关操作在mounted // 跟数据相关操作可以在created,也可以在mounted
console.log(this.$el, 'mounted')
},
beforeUpdate () {
console.log(this, 'beforeUpdate')
},
updated () {
console.log(this, 'updated')
},
activated () {
console.log(this, 'activated')
},
deactivated () {
console.log(this, 'deactivated')
},
beforeDestroy () {
console.log(this, 'beforeDestroy')
},
destroyed () {
console.log(this, 'destroyed')
},
render (h) {
// throw new TypeError('render error')
console.log(h, 'render function invoked')
return h('div', {}, this.text)
},
renderError (h, err) {
// 只开发环境使用
// 在本组件出错时调用,若本组件调用的子组件报错,不会执行
// 只关心本组件是否渲染成功
return h('div', {}, err.stack)
},
errorCaptured () {
// 正式环境可以使用
// 可以向上冒泡,能监听本组件及其子组件所有报错信息
}
})
// 若不指定el,执行beforeCreate、执行created
// mount 是将组件生成的HTML内容挂载到Dom上的的过程
// update 每次数据更新时执行
// destroy 组件销毁时执行
// activate 跟vue中原生组件keep-alive相关
// 注意this.$el的值
// mount 和 create 只调用一次
// mount在服务端渲染是不会被调用的,因为mount是跟dom操作相关,没有dom执行环境。服务端渲染会调用create
指定el,执行结果如下:
不指定el,执行结果如下:
render function执行结果:
renderError执行结果:
与君共勉:再牛逼的梦想,也抵不住傻逼般的坚持!