初识vue 第三节生命周期

拖了好久了，今天终于想起来整理了 ^_^，好了今天整理一下vue的生命周期

一看到生命周期就会想到人的一生的各个重要过程嘛，这个小小的代码也有属于它的生命过程，在每一个所创建的vue 实例中都会有一个被创建被渲染被更新和销毁的过程，这个过程就被成为它的生命周期。在生命周期中被调用的函数被称为生命周期函数，也被成为钩子函数。以下……

先来个图（ https://cn.vuejs.org/images/lifecycle.png ），后面有简介和代码

1、beforeCreate() 创建前

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2、create() 创建后

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3、brforeMount() 载入前

在挂载开始之前被调用：相关的 render 函数首次被调用。

4、mounted() 载入后

el 被新创建的 vm.el替换掉，并且挂载到实例上去后调用这个函数，如果实例挂载了一个文档内元素，当mounteed被调用时vm.el也在文档内。

5、beforeupdata() 更新前

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

6、updata() 更新后

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

7、brforeDestory() 销毁前

实例销毁之前调用。在这一步，实例仍然完全可用。

8、destroyed() 销毁后

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

最常用的就是create / mounted 一定要记下。

还有一点需要注意的是此时this的指向问题，生命周期钩子的 this 上下文指向调用它的 Vue 实例。但是注意呀有但是不要在选项属性或者回调上使用箭头函数（）=>{} ，因为箭头函数并没有this ，它会作为变量一直向上级查找，直到找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。要重视。

 1 <div id="app">
 2         <div v-if="simba">
 3   {{nickname}} <input type="text" v-model="nickname">
 4         </div>
 5 <button @click="add()">删除/出现</button>
 6 </div>
 7

new Vue({

el: "#app",

 8   data() {
 9     return {
10         acitveIMGIndex: 0,
11         simba:true,
12       }
13    },
14   methods: {
15                 add(e){

16                    this.simba=!this.simba
17  } 18  }, 19  created() { 20 //AJAX请求 21 console.log("创建完成，data准备好了", this.$data, this.$el) 22  }, 23  beforeCreate() { 24 console.log("创建之前", this.$data, this.$el) 25  }, 26  beforeMount() { 27 console.log("挂载之前", this.$data, this.$el) 28  }, 29  mounted() { 30 setInterval(() => { 31 if (++this.acitveIMGIndex === this.imgs.length) this.acitveIMGIndex = 0 32 }, 1000); 33 console.log("挂载完成，DOM准备好了", this.$data, this.$el) 34  }, 35  beforeUpdate() { 36 console.log( '更新前'+this.$el.innerHTML) 37  }, 38  updated() { 39 console.log('更新后'+this.$el.innerHTML) 40  }, 41  beforeDestroy() { 42 console.log('销毁之前') 43  }, 44  destroyed() { 45 console.log('销毁之后') 46  } 47 })

今天就先整理到这里，对于要在选项属性或者回调上使用箭头函数的问题我查了几篇文章并没有完全明白，只是记住了，小伙伴们还可以再看下官网 https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

晚安咯，下次整理组件的内容，这可是个好东东

初识vue 第三节 生命周期

猜你喜欢

初识vue 第三节生命周期