生命周期

• 又名生命周期钩子，生命周期回调函数，生命周期函数
  特定时间做特定的事，要把特定的事写特定的函数里
  函数中的this指向vm实例或是组件实例对象

lifecycle.png

---

挂载流

beforecreate函数

• beforecreate函数: 初始化生命周期、事件，数据代理还没开始，vm上的数据都还是null或是undefined。methods里写的方法还没出现在vm上

  <div class="root">
    <h1>让n加1:   {{n}}</h1>
    <button @click="add">点击加1</button>
  </div>
  <script>
  Vue.config.devtools = true;
  new Vue({
    el:'.root',
    data:{
      n:1
    },
    methods:{
      add(){
        this.n++
      }
    },
    beforeCreate(){
      console.log('beforeCreate')
      console.log(this) //vm,data和methods等等都是没有看到
      debugger//卡断点
    }
  })
  </script>

beforeCreate.PNG

• 从图可以看出来，没有data，没有任何方法，都是null，undefined，没有我们写的数据的n，add方法，一切都刚刚开始，都只是在配置属性方法事件等

---

created函数

• created函数:初始化了数据监测、数据代理，可以访问到了数据，方法等

  <div class="root">
    <h1>让n加1:   {{n}}</h1>
    <button @click="add">点击加1</button>
  </div>
  <script>
  Vue.config.devtools = true;
  new Vue({
    el:'.root',
    data:{
      n:1
    },
    methods:{
      add(){
        this.n++
      }
    },
    beforeCreate(){
      console.log('beforeCreate')
      console.log(this)
      // debugger
    },
    created(){
      console.log('created')
      console.log(this)//可以访问到vm数据，方法等,this就是vm
      debugger
    }
  })
  </script>

created.PNG

• 黄色部分：可以看到数据data里的n:1，method里的方法add，有数据劫持了data了
  el-outerHMTL.PNG

---

beforeMount函数

• 1.判断是否有el，如果有，再判断是否有template属性
• 2. 要是没有，容器包括外层的HTML
• 3. 要是没有，容器不包括外层的HTML

  <div class="root">//容器包括这个一行div
    <h1>让n加1:   {{n}}</h1>
    <button @click="add">点击加1</button>
  </div>

• 开始解析模板了，在内存中生产虚拟DOM，但是页面还不能展示效果
• 挂载之前，vue解析出了虚拟DOM，但是页面没有效果，对dom的操作都不生效

  <div class="root" :n="n">
    <h1>让n加1:   {{n}}</h1>
    <button @click="add">点击加1</button>
  </div>
  <script>
  Vue.config.devtools = true;
  new Vue({
    el:'.root',
    data:{
      n:1
    },
    methods:{
      add(){
        this.n++
      }
    },
    beforeCreate(){
      console.log('beforeCreate')
      console.log(this)
      // debugger
    },
    created(){
      console.log('created')
      console.log(this)
      //debugger
    },
    beforeMount(){
      console.log('beforeMount')
      console.log(this)//对DOM操作无效，刷新后就没有了，不生效
      debugger
    }
  })
  </script>

• 在console用jQuery修改h1，修改为“最终不会发生改变”，从页面中可以看到确实变成纯文字了

不改变.PNG

• 刷新后还可以看到让n加1: n这段代码，“最终不会发生改变”这段文字消失了，如图

原样.PNG

---

mounted

• 将虚拟DOM转化为真实DOM，对修改的页面刷新不会重置
  对DOM的操作有效，但是不要那么做
  这里主要用来进行这些操作：开启定时器，发送网络请求，订阅消息，绑定自定义时间等初始化操作

 <div class="root" :n="n">
    <h1>让n加1:   {{n}}</h1>
    <button @click="add">点击加1</button>
  </div>
  <script>
  Vue.config.devtools = true;
  new Vue({
    el:'.root',
    data:{
      n:1
    },
    methods:{
      add(){
        this.n++
      }
    },
    beforeCreate(){
      console.log('beforeCreate')
      console.log(this)
      // debugger
    },
    created(){
      console.log('created')
      console.log(this)
      //debugger
    },
    beforMount(){
      console.log('beforeMount')
      console.log(this)
      // debugger
    },
    mounted(){
      console.log('mounted')
      console.log(this)//对DOM操作有效，刷新了也生效
      debugger
    }
  })
  </script>

---

• 没有el，只走到beforMount，模板不会被解析，没有页面

  
  没有el.PNG
  没有到mounted.PNG

---

单独调用$mount这个API

• 解析模板，会走到beforMount这个函数钩子

• 有template的时候，el也要写的，不然template就不能替换el作为容器展示页面

  
  有template.PNG

<div class="root" :n="n">
    <!-- <h1>让n加1:   {{n}}</h1>
    <button @click="add">点击加1</button> -->
  </div>
  <script>
  Vue.config.devtools = true;
  const vm = new Vue({
    el:'.root',
    template:`<div>
      <h1>让n加1:   {{n}}</h1>
      <button @click="add">点击加1</button>
    </div>`,//这个配置替换el这个容器，上面的<div class="root" :n="n">变为<div>
    data:{
      n:1
    },
    methods:{
      add(){
        this.n++
      }
    },
    beforeCreate(){
      console.log('beforeCreate')
      console.log(this)
      // debugger
    },
    created(){
      console.log('created')
      console.log(this)
      //debugger
    },
    beforMount(){
      console.log('beforeMount')
      console.log(this)
      // debugger
    },
    mounted(){
      console.log('mounted')
      console.log(this)
      // debugger
    }
  })

template替换el.PNG

总结

• beforecreate>>> created>>>beforeMount>>>mounted

	beforecreate	created	beforeMount	mounted
数据	无	有	有	有
方法	无	有	有	有
页面	无	无	有（操作不生效）	有（操作生效）