vue生命周期钩子函数

执行说明（面试题）
1. 第一次页面加载的时候，先执行父组件的前三个生命周期 => 接着执行子组件的4个 => 等到子组件mouted之后，才执行父组件的mouted

2. 页面加载之后，给子组件传递父组件数据，同时子组件使用了父组件的数据 => 先执行父组件更新函数beforeupdate => 子组件的beforeupdate和updated => 父组件的updated

  // 第一次加载执行 前四个
  beforeCreate () {
    // 1. 创建前 => 获取不到变量值
    console.log("beforeCreate --- 实例初始化前")
    console.log(this.msg) // undefined 
  },
  created () {
    // 2. 创建后 => 可以获取到变量值 => 发送ajax请求
    console.log("created ---  实例初始化后")
    console.log(this.msg) // "我是变量"
  },
  beforeMount () {
    // 3. 挂载前 => 页面没有渲染完 => 不能操作DOM
    console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前")
    console.log(document.getElementById("myUl")) // null
    // console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
  },
  mounted () {
    // 4. 挂载后=》操作DOM (组件渲染完成)
    console.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上 ")
    // console.log(document.getElementById("myUl").children[1].innerHTML)
    console.log(document.querySelector('#myUl').children[1].innerText)
  },
  beforeUpdate () {
    // 5. 更新前
    console.log("beforeUpdate --- 数据更新, 页面更新前")
    // 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
    // console.log(document.getElementById("myUl").children[4].innerHTML) // 报错
  },
  updated () {
    // 6. 更新后 => 才可以拿到更新后的DOM元素和值
    console.log("updated --- 数据更新, 页面更新后")
    console.log(document.getElementById("myUl").children[4].innerHTML)
  },
  beforeDestroy () {
    // 7. 销毁前
    // (清除定时器 / 解绑eventBus事件)
    console.log("beforeDestroy --- 实例销毁之前调用")
  },
  destroyed () {
    // 8. 销毁后
    // (清除定时器 / 解绑eventBus事件)
    console.log("destroyed --- 销毁完成")
  },

activated和deactivated配合keep-alive标签使用

<button @click='flag =! flag' ref="flag">点击销毁</button>
            
<keep-alive>
     <cmpsize v-if='flag'></cmpsize>
</keep-alive>

activated 和上面的beforeDestroy和destroyed用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用beforeDestroy和destroyed的话，就太浪费性能了。

实例被激活时使用，用于重复激活一个实例的时候

 components:{
     cmpsize:{
        template:'<div>这是一个子组件</div>',
        activated(){  
            console.log('实例被激活时');
        },
    　}
　}

deactivated 实例没有被激活时，

components:{
     cmpsize:{
        template:'<div>这是一个子组件</div>',
        activated(){  
            console.log('实例没有被激活时');
        },
    　}
　}