lifecycle.png

beforeUpdate

• 当数据一旦更新，就会调用这个构造
  在挂载以后，数据已经更新，但是页面还没更新

更新.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',
    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
    },
    beforeUpdate(){
      console.log('beforeUpdate')
      console.log(this.n)//点击button，n变成了2，但是页面没有有更新，数据更新了
      debugger
    }

  })
  // vm.$mount('.root')
  </script>

beforeUpdate-数据更新-页面没有更新.PNG

• 页面数据未同步

updated

• 根据新新旧虚拟DOM进行对比，最终呈现新DOM，完成Model>>>view的更新

新旧DOM对比.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',
    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
    },
    beforeUpdate(){
      console.log('beforeUpdate')
      console.log(this.n)
      // debugger
    },
    updated(){
      console.log('updated')
      console.log(this.n)//新旧虚拟DOM对比，形成最终结果
      debugger
    }
  })
  // vm.$mount('.root')
  </script>

新旧虚拟DOM一致.PNG

• 数据页面都是新的

debugger用于调试，因为页面一下子跑的太快了，要一步一步的看结果