6、vue-生命周期

vue生命周期
先使用new Vue构造函数生成vue实例
创建完vue实例之后就需要初始化数据--data方法进行初始化得
初始化事件
创建：
beforeCreate--在创建之前调用得钩子函数
created：数据已经在data方法中初始化了，计算属性，事件回调都已经完成，只不过dom并未挂载
挂载之前回进行得操作
会找是否有需要挂载得el对象，有的话判断是否有template模板，有得话那么将模板转化为render函数，通过render函数去渲染DOM树
如果都没有得话，直接把最外层得el对象作为html得模板
挂载：
beforeMount：render方法首次被调用生成虚拟DOM得时候执行得
把虚拟DOM生成真实DOM
mounted：挂载已经完成了，dom树已经完成渲染到页面中得，所以在这时我们可以对真实dom进行操作了
更新期：
数据有更新，会执行得是更新期，在之前会调用得钩子函数：beforeUpdate
对虚拟DOM重新渲染，以最小得开支来重新渲染DOM，渲染完成之后会生成真实DOM
updated：组件更新完成之后调用得钩子函数
销毁：
beforeDestroy：在实例销毁之前会调用得钩子函数，在销毁之前还是可以访问实例得数据得
清除计算属性、清除子组件、清除事件监听等内容
destroyed：组件销毁之后会调用得钩子函数

注意：更新期被执行是当数据发生变化得时候才会执行，如果单纯得只是改变DOM中css样式得话，那么更新其不会执行

 

<template>
  <div id='app'>
     <h1>{{mas}} <button @click="clickA">点下</button></h1>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      mas: '我是父组件zhi',
    }
  },
  components: {
    'headera': Headera,
  },
  methods: {
      clickA () {
        this.mas=" 我改变了父组件的值"
      }
  },
  beforeCreate () {
    console.log ('创建之前')
  },
  created () {
     console.log ('创建之后')
  },
  beforeMount (){
    console.log ('挂载之前')
  },
    mounted () {
    console.log ('挂载之后')
  },
  beforeUpdate () {
         console.log ('更新之前')
  },
  updated () {
    console.log ('更新之后')
  },

  beforeDestroy () {
    console.log ('销毁之前')
  },
  destroyed () {
    console.log ('销毁之后')
  }
}

</script>

生命周期得应用场景
loading效果：一般都是放在beforeCreate，并且在created中进行移除
前后台交互ajax等内容：一般会放在created中，可以在这时完成数据得初始化（单纯得获取数据）
获取数据得同时对dom进行操作：mounted，dom已经有了，同时也可以发送ajax请求
对更新得数据统一处理：updated中，更新之后调用得函数，数据已经发生变化了，所以可以对这些数据进行统一得管理