Vue.js lifecycle hooks

Posted 2021-05-17 coderwhytop

export default {
    data() {
      return {}
    },
    mounted() {
      console.log(\'mounted hook called\')
    },
    errorCaptured(err, vm, info) {
      console.log(\'error captured in component\', vm)
      console.error(err)
      console.log(\'error info:\', info)
    },
    activated() {
      console.log(\'cached component is being used again\')
    },
    deactivated() {
      console.log(\'component is being kept alive in cache for now\')
    }
}
// 所以vue生命周期lifecycle是11个

 

export const LIFECYCLE_HOOKS = [
\'beforeCreate\',
\'created\',
\'beforeMount\',
\'mounted\',
\'beforeUpdate\',
\'updated\',
\'beforeDestroy\',
\'destroyed\',
\'activated\',
\'deactivated\',
\'errorCaptured\'
]

 

// 调用顺序为

\'beforCreate\',

\'create\',

\'beforeMount\'

\'mounted\',

\'beforeUpdata\',

\'updataed\',

\'beforDistory\',

\'distoryed\',

\'activated\',

\'deactivated\',

\'errorCaptured\'

 // 关于vue.js中created()和activated()的个人理解

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；

activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等