vue入门笔记体系（二）vue生命周期

scola666 发布于2019-08-23 10:30 / 2846人阅读

摘要：此时还未有选项钩子函数和间的生命周期完成后，会有一个判断过程，判断对象是否有选项。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变，会触发对应组件的重新渲染，先后调用和钩子函数。和钩子函数间的生命周期钩子函数在实例销毁之前调用。

vue生命周期

这是vue生命周期的图示具体内容：

所有的生命周期钩子函数如下：

beforeCreate() {
    console.log(this, "beforeCreate");
    console.log("el:"+this.$el)
    console.log("data:"+this.$data)
    console.log("text:"+this.text)
  },
  created() {
    console.log(this, "created");
    console.log("el:"+this.$el)
    console.log("data:"+this.$data)
    console.log("text:"+this.text)
  },
  beforeMount() {
    console.log(this, "beforeMount");
    console.log("el:"+this.$el)
    console.log("data:"+this.$data)
    console.log("text:"+this.text)
  },
  mounted() {
    console.log(this, "beforeMount");
    console.log("el:"+this.$el)
    console.log("data:"+this.$data)
    console.log("text:"+this.text)
  },
  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");
  },

打开控制台可以看出：

一个实例被创建后上面的这四个钩子函数按顺序执行，这四个函数在这个过程只会被调用一次；
beforeUpdate、updated是数据更新的前后执行的；
beforeDestroy、destroyed是组件销毁后执行的；
activated、deactivated是组件使用执行的，下面针对每个过程进行详解：

1.beforeCreate

beforeCreate前面是初始化一个vue实例，此时，Events初始化完成，但data还未完成，所以此时不要修改数据；

2.created

created时，数据已经和data属性进行绑定，这是最早进行ajax数据请求的地方。此时还未有el选项；

3.created钩子函数和beforeMount间的生命周期

created完成后，会有一个判断过程，判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。
如果有el选项后，会再次判断是否有templete选项：
如果有的话中有template参数选项，则将其作为模板编译成render函数。
如果没有template选项，则将外部HTML作为模板编译。
可以看到template中的模板优先级要高于outer HTML的优先级。

4.beforeMount和mounted 钩子函数间的生命周期

此时已经挂载el选项，可以操作dom,至此，vue实例前四个生命周期执行完成。

5.beforeUpdate钩子函数和updated钩子函数间的生命周期

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

6.beforeDestroy和destroyed钩子函数间的生命周期

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

另：activated：keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。

deactivated：keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96406.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
Java学习路线总结，搬砖工逆袭Java架构师（全网最强）

摘要：哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码，加入群聊，一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话，现在公司的现状是码农太多，但能独立带队的人太少，简而言之，不缺干 ? 哪吒社区Java技能树打卡【打卡贴 day2...

Scorpion 2021-11-18 10:02 评论0 收藏0