vue对象生命周期

vue对象生命周期:
1. 什么是: 一个VUe对象从创建到所有页面内容加载完成所经历的过程
2. 包括: 4个阶段:
(1). 创建 create 必经
a. 创建new Vue()对象，在new Vue()对象中创建data对象并请保镖
b. 暂时不扫描DOM树，暂时没有虚拟DOM树
(2). 挂载 mount 必经
a. 扫描DOM树，生成虚拟DOM树，并首次挂载数据到页面元素上

(3). 更新 update 当data中的变量被修改时才触发
(4). 销毁 destroy 还有调用$destroy函数销毁当前组件时，才触发 —— 很少用
3. 为什么要学习生命周期: 
(1). jquery中，在页面首次加载时有很多初始化操作，比如自动发送ajax请求，比如自动绑定首屏数据。这些操作都写在$(function(){ ... })中。凡是写在$(function(){ ... })中的代码，会在DOM内容加载完成后自动执行！
(2). 问题: vue框架中几乎不用jquery，自然也就没有$(function(){ ... })，比如自动发送ajax请求获取首屏数据的代码应该写在哪儿呢？
(3). 错误: 将axios请求的代码放在new Vue()外部。
	因为将来vue采用组件化开发，规定一个组件的所有js代码必须放在这个组件的对象内部！组件对象之外不允许出现任何逻辑相关的代码
(4). 正确: 将要执行的页面初始化js代码，绑定到vue的某个生命周期阶段，自动执行！

4. 何时: 今后只要希望在vue对象创建和挂载过程中，自动执行某些操作时，都要用生命周期

5. 如何: vue对象有四个生命周期，每个生命周期前后都有一对儿（2个）钩子函数(回调函数)
   beforeCreate() 在new Vue()创建前自动触发，没有data和变量呢，无法修改data中的变量——不适合发送首屏ajax请求
   (1). 创建阶段 create
   created() 创建完new Vue()和data对象之后自动触发
   a. 可以操作data中的变量
   b. 但是暂时无法执行DOM相关的操作，因为还没有扫描DOM树
   beforeMount() 在开始扫描DOM树之前自动触发
   a. 也可以操作data中的变量
   b. 但是暂时也无法执行DOM相关的操作，因为还没有扫描DOM树
   (2). 挂载阶段 mount
   mounted() 在创建完虚拟DOM树，首次挂在页面内容完成之后自动触发
   a. 已经有了data对象，可以操作data中的变量
   b. 已经有了虚拟DOM树，且数据已经显示在页面上了，可以执行DOM相关操作
   总结: mounted()才是最适合做页面初始化工作

   beforeUpdate() 在开始修改data中的变量之前自动触发
   (3). 更新阶段 update
   updated() 修改完data中的变量之后自动触发
   beforeDestroy() 在开始销毁当前组件之前自动触发触发
   (4). 销毁阶段 destroy
   destroyed() 在销毁当前组件之后自动触发
   

 <!--希望页面加载时，就加载首页的六个商品-->
  <div id="app">
    <ul>
      <li v-for="(p,i) of products" :key="i">
        {{p.title}} | ¥{{p.price}} | {{p.details}}
      </li>
    </ul>
  </div>
  <script>
    //配置
    axios.defaults.baseURL="http://xxxxx.applinzi.com";
    var vm=new Vue({
      el:"#app",
      data:{
        products:[]
      },
      methods:{
      },
      beforeCreate(){
        console.log(`创建data:{}前自动触发`)
      },
      created(){
        console.log(`创建data:{}后自动触发`)
      },
      beforeMount(){
        console.log(`挂载页面元素和内容前自动触发`)
      },
      mounted(){
        console.log(`挂载页面元素和内容后自动触发`)
        //为了让.then()中的this和外部this保持一致，都指向当前new Vue()对象
        axios.get("/index").then(result=>{
          //想把请求回来的数据，保存到data中products变量上
          this.products=result.data;
        })
      },
      beforeUpdate(){
        console.log(`修改data中的变量前自动触发`)
      },
      updated(){
        console.log(`修改data中的变量后自动触发`)
      },
      beforeDestroy(){
        console.log(`销毁当前组件前自动触发`)
      },
      destroyed(){
        console.log(`销毁当前组件后自动触发`)
      }
    })
    //在控制台中: vm.$destory()
  </script>

总结：
vue生命周期: 4个阶段 8个钩子函数
beforeCreate()
(1). 创建阶段 create
created()
beforeMount()
(2). 挂载阶段 mount
mouted()
beforeUpdate()
(3). 更新阶段 update
updated()
beforeDestroy()
(4). 销毁阶段 destroy
destroyed()