来自后端开发同学的Vue的生命周期学习

先附上神兽镇楼。

神兽.png

神兽有点喜感，不错的开头。
接下来附上官方盗的图，读书人的事不能说偷，要说盗。
Vue官方截图.png

八个钩子

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

什么是生命周期：
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
主要的生命周期函数分类

  • 创建期间的生命周期函数：

    • beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性。在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

    • created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板，就是还没有渲染到对应的页面模块中，只是先创建好了。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

    • beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中。在挂载开始之前被调用：相关的 render 函数首次被调用。

    • mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。el 被新创建的 vm.$$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

  • 运行期间的生命周期函数：
    • beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
    • updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
  • 销毁期间的生命周期函数：
    • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
    • destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

先附上等会要用到的代码

<template>
  <div id="app">
    hello world！
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  beforeCreate: function () {
    console.group('beforeCreate 创建前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
  },
  created: function () {
    console.group('created 创建完毕状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
  },
  beforeMount: function () {
    console.group('beforeMount 挂载前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + (this.$el))
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
  },
  mounted: function () {
    console.group('mounted 挂载结束状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
  },
  beforeUpdate: function () {
    console.group('beforeUpdate 更新前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
  },
  updated: function () {
    console.group('updated 更新完成状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
  },
  beforeDestroy: function () {
    console.group('beforeDestroy 销毁前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
  },
  destroyed: function () {
    console.group('destroyed 销毁完成状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
  }

}
</script>

create 和 mounted 相关
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
update 相关
data里的值被修改后，将会触发update的操作。
执行了destroy操作，后续就不再受vue控制了。

开始实战
首先创建一个vue项目。

安装.png

然后等待安装。。。。
不知道什么原因装的很慢，大概40分钟，一直在等待，等待期间做了很多事，
看来会视频，打了会瞌睡，终于装好了。
安装完成.png

好滴，按照提示，开始新的旅途。

编译成功.png

编译速度还是很快的。
很好，成功第一步。


首页地址.png

找到我的webstorm，进入项目。
笔记本操作，要卡会，我已经给我的笔记本加了4g的内存。它还是不给力，看来要考虑重装系统了，==。
进入项目将之前的代码键入。
稍等，先将首页改成hello world


helloWorld.png

代码执行后，打开控制台查看信息。
然后刷新一下。


控制台.png

仔细看一下 beforeCreate:


beforeCreate.png

这里el，data，message都还是undefind，三个都还没有被初始化赋值。

Created后：


Created.png

el，还是没有变化，也就是还没有渲染到页面中
但是data已经被初始化了，
message也已经初始化了。
增加一个compute试试？

  computed: {
    hello () {
      return 'hello,i am a watch!'
    }
  }
computed.png

也是一样，created后，compute就被调用了，同理，留给大家自己证明。感觉像数学上的惯例，先证明一个，剩下的留给读者自己证明。

然后看挂载前。


beforeMount.png

看起来没有啥变化，和created比起来。这里是完成了渲染的准备工作，但是还没有渲染/

然后是挂载完成。


Mount.png

el，就是我们的div标签，内容了，被挂载到页面中了。

然后增加两个按钮，来查看更新和销毁动作。这里用了el，自己装。

<el-button @click="dataVar += 1" type="primary" >更新 {{dataVar}}</el-button>
 <el-button @click="handleDestroy" type="primary">销毁</el-button>

  methods: {
    handleDestroy () {
      this.$destroy()
    }
  }

然后页面就变成了这样。


增加了按钮的页面.png

updated和beforeupdate

updated和beforeupdate.png

他们的dataVar都是一样的，差异就在于，beforeupdate时页面的数据还没刷新，updated后，页面的数据就刷新了，这里待验证。
点击完页面就+1了。
页面显示+1.png

然后点击销毁按钮。


销毁.png

显示的还是一样，但是销毁后Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
这里，再次点击更新按钮就失效了，不能增加1了。


没有变化的按钮.png

最后附上最终代码

<template>
  <div id="app">
    hello world！
    <el-button @click="dataVar += 1" type="primary" >更新 {{dataVar}}</el-button>
    <el-button @click="handleDestroy" type="primary">销毁</el-button>
    <button @click = "hellos = !hellos"> 切换 </button>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      dataVar: 1,
      hellos: true
    }
  },
  beforeCreate: function () {
    console.group('beforeCreate 创建前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
    console.log('%c%s', 'color:red', 'computed: ' + this.hello)
  },
  created: function () {
    console.group('created 创建完毕状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
    console.log('%c%s', 'color:red', 'computed: ' + this.hello)
  },
  beforeMount: function () {
    console.group('beforeMount 挂载前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + (this.$el))
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
    console.log('%c%s', 'color:red', 'computed: ' + this.hello)
  },
  mounted: function () {
    console.group('mounted 挂载结束状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
    console.log('%c%s', 'color:red', 'computed: ' + this.hello)
  },
  beforeUpdate: function () {
    console.group('beforeUpdate 更新前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
    console.log('%c%s', 'color:red', 'computed: ' + this.hello)
    console.log('%c%s', 'color:red', 'dataVar: ' + this.dataVar)
  },
  updated: function () {
    console.group('updated 更新完成状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
    console.log('%c%s', 'color:red', 'computed: ' + this.hello)
    console.log('%c%s', 'color:red', 'dataVar: ' + this.dataVar)
  },
  beforeDestroy: function () {
    console.group('beforeDestroy 销毁前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
    console.log('%c%s', 'color:red', 'computed: ' + this.hello)
    console.log('%c%s', 'color:red', 'dataVar: ' + this.dataVar)
  },
  destroyed: function () {
    console.group('destroyed 销毁完成状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.msg)
    console.log('%c%s', 'color:red', 'computed: ' + this.hello)
    console.log('%c%s', 'color:red', 'dataVar: ' + this.dataVar)
  },
  computed: {
    hello () {
      return 'hello,i am a watch!'
    }
  },
  methods: {
    handleDestroy () {
      this.$destroy()
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

结束分享！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 人生
    人生多姿多彩， 人生喜乐无常， 人生变化多端， 我要珍惜人生， 不管人生有多少坎坷， 我都要好好活下去。 人生啊，...
    黑樱花阅读 1,391评论 0赞 0
  • 2018年8月2日 日精进
    小组分人 一股压力突然降到头顶 平时就是太依赖 生活的太安逸 没有压力就没有动力 生...
    我耳畔阅读 1,066评论 0赞 0
  • 猩红热
    2019年5月13日 星期一 晴 周六下午卢恩萱就喊着说嗓子疼，我以为是扁条体发炎，直接当感冒治疗啦！昨天中午开...
    64fdf7a8ac71阅读 2,795评论 0赞 1
  • 31，洋相出到京城里
    昨天翻狗照，我家的照片都是写好日期地点，一看明明白白，那时候，二十多年前，小红已经自己买了塑封机，每张照片都塑封好...
    天使小鱼儿阅读 2,994评论 4赞 3
  • 英语学习之背单词
    学习英语将近20年，也从事英语教学工作五六年了，想说说自己的心得体会。 今天重点说背单词。 词汇可谓是英语学习的基...
    天上无云阅读 2,286评论 0赞 1