- N +

vue 生命周期钩子

原标题:vue 生命周期钩子

导读:

所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 ...

文章目录 [+]

所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义。

生命周期图如下

// new Vue() vue的初始化阶段、vue正在初始化

// beforeCreate阶段:vue实例属性无法获取,以及根 DOM 元素还未绑定;
// bbeforeCreate: 作用在于 有时候 某些操作要高于 data实例属性初始加载之前处理时就可以在此阶段操作
beforeCreate () {
    console.log(this.$el, this.$data)
},

// created阶段:vue实例属性可以获取也可以修改,根 DOM 元素还未绑定;
// created:用于页面还未加载,然后当前阶段用于修改 vue实例属性初始值,或者再进一步操作页面未加载的插件或者其他初始化框架
created () {
    this.smg = 15
    console.log(this.smg, this.$data, this.$el, 'created')
},

// 判断 当前vue 实例有没有绑定 el ,如果有的话接着往下执行,没有的话那就是通过 $mount()去绑定,如还是没有就报错;
//  再判断当前vue实例有没有 template 模板就 执行render函数,如果有的话就接着下一步。没有的话,就调用外部的html,还是没有的话就抛出错误;
//  render函数 > template属性 > 外部html

// beforeMount 阶段:vue实例属性可以获取到也可以修改,根DOM元素还未绑定,该阶段创建vue实例的$el,然后用它替代el属性。
// vnode $el创建并且替换el 渲染页面

beforeMount () {
    console.log(this.smg, this.$data, this.$el, 'beforeMount')
},

// 本次 vue 实例 初始阶段结束、页面已经可以全部显示出来了
mounted () {
    console.log(this.smg, this.$data, this.$el, 'mounted')
},

// 更新阶段 数据改变——导致虚拟DOM的改变
beforeUpdate () {
    console.log(this.$data, this.$el, 'beforeUpdate')
},

// 避免在这里做太多改动 view视图的 一些实例属性的操作
// 页面已经出来的时候,才走到该阶段 
updated () {
    console.log(this.$data, this.$el, 'updated')
},

// 销毁阶段
beforeDestroy () {
    console.log(this.$data, this.$el, 'beforeDestroy')
},
destroyed () {
    console.log(this.$data, this.$el, 'destroyed')
},

// 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
// 可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要,它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。
errorCaptured () {

}

// DOM 的操作,页面更新完毕的时候在操作

image.png


打印出控制台效果如下:

image.png

image.png

image.png

有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

0

0
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共121人参与)参与讨论

    还没有评论,来说两句吧...