vue 生命周期函数小tips

vue 生命周期函数小tips

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。


1.生命周期钩子的 this 上下文指向调用它的 Vue 实例。

2.destroyed钩子函数有一点一定要特别注意：在执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。所以对于实时显示的通知型组件，在他destroyed之前，我们必须手动removeChild()删除该节点；否则，DOM节点还是存在，影响浏览器性能。

3.组件套用时的生命周期:
代码示例如下：

<tabs>
  <tab />
  <tab />
  <tab />
  <tab-container />
</tabs>

/*tabs的打印代码*/
  beforeMount () {
    console.log('============Tabs befortemounted==============')
  },
  mounted () {
    console.log('============Tabs mounted==============')
  },
  created () {
    console.log('============Tabs created==============')
  }

/*tab的打印代码*/
  beforeMount () {
    console.log('----------------tab beforemounted-------------')
  },
  mounted () {
    this.$parent.panes.push(this)
    console.log('----------------tab mounted-------------')
  },
  created () {
    console.log('----------------tab created-------------')
  }

/*tab-container的打印代码*/
  beforeMount () {
    console.log('!!!!!!!!!!!!!!!!tab container beforemounted!!!!!!!!!!!!!!!!!')
  },
  mounted () {
    console.log('!!!!!!!!!!!!!tab container mounted!!!!!!!!!!!!!!!!!')
  },
  created () {
    console.log('!!!!!!!!!!!!!!!!!!!!!tab container created!!!!!!!!!!!!!!!!!!!!!!!')
  }

我们可以看出，先执行了父组件的created和beforeMounted函数；再按子组件的使用顺序，执行子组件的created和beforeMounted函数；依旧按照子组件的执行顺序执行mounted函数，最后是父组件的mounted函数；
也就是说__父组件准备要挂载还没挂载的时候，子组件先完成挂载，最后父组件再挂载；__所以在真正整个大组件挂载完成之前，内部的子组件和父组件之间的数据时可以流通的。