vue生命周期钩子函数

<template>
    <div>
      <h2>this is from C.vue</h2>
    </div>
</template>

<script>
export default {
  name: 'C',
  data () {
    return {
      msg: 'hello C.cue',
      moneyInit: 100
    }
  },
  computed: {
    money () {
      return this.moneyInit * 100
    }
  },
  methods: {
    test () {
      console.log('this is a test')
    }
  },
  beforeCreate () {
    console.log('beforeCreate')

    // this的结果是VueComponent
    console.log('this:', this)
    // beforeCreate时 data,computed都不能访问，为undefined
    console.log('this.msg:', this.msg, 'this.money:', this.money)
  },
  created () {
    console.log('created')
    // created时，data,computed,methods均能访问
    console.log('this.msg:', this.msg, 'this.money:', this.money)
    this.test()
  }
}
</script>

<style lang="scss" scoped>

</style>

<template>
  <div id="app">
    <div @click="changeMsg">this is from app.vue {{msg}}</div>
    <router-link :to="{name:'A'}">to A Page</router-link>
    <router-link :to="{name:'B'}" tag="div">to B Page</router-link>
    <router-link :to="{name:'C'}">to C Page</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      msg: 'hello'
    }
  },
  methods: {
    changeMsg () {
      if (this.msg === 'hello') {
        this.msg = 'today'
      } else {
        this.msg = 'hello'
      }
    }
  },
  created () {
    // created 时 this.$el还不能访问，DOM还未挂载
    console.log('created function from App.vue, this.$el:', this.$el)
  },
  beforeMount () {
    // 注意beforeMount的this.$el也为undefined
    console.log('beforeMount function  from App.vue, this.$el:', this.$el)
  },
  mounted () {
    // mounted 此时this.$el能访问，vue实例挂载到了DOM上
    console.log('mounted function  from App.vue, this.$el:', this.$el)
  },
  // data发生变化，即dom发生变化
  beforeUpdate () {
    console.log('beforeUpdate function from App.vue')
  }

}
</script>

<style>
  #app{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>

注意几点：

1. created与mounted都常见于ajax请求，前者如果请求响应时间过长，容易白屏

2. mounted不能保证所有子组件都一起被挂载。如果要等到整个视图更新完毕，使用vm.$nextTick()

 

nextTick：在vue中，用于处理DOM更新操作。vue里面有个watcher,用于观察数据变化，然后更新DOM，vue并不是每次数据更新都会触发DOM更新，而是将这些操作缓存在一个队列。在一个事件循环结束后，刷新队列，统一执行DOM更新。

vm.$nextTick([callback])将回调延时到下次DOM更新循环结束之后执行。在修改数据后使用这个方法，它会获取更新后的DOM。它的this会绑定到调用的实例上，这是与Vue.nextTick唯一不同的地方。

<template>
    <div>
      <div ref="tag">{{msg}}</div>
      <div>msg1:{{msg1}}</div>
      <div>msg2:{{msg2}}</div>
      <button @click="changeMsg">click it</button>
    </div>
</template>

<script>
export default {
  name: 'C',
  data () {
    return {
      msg: '',
      msg1: '',
      msg2: ''
    }
  },
  methods: {
    changeMsg () {
      this.msg = 'hello'
      // this.msg1没有立即更新，没能获取到更新后的DOM
      this.msg1 = this.$refs.tag.innerHTML
      // this.msg2成功渲染，成功获取到了更新后的DOM
      this.$nextTick(() => {
        this.msg2 = this.$refs.tag.innerHTML
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

 

参考链接：https://juejin.im/entry/5aee8fbb518825671952308c