Vuejs 生命周期

2018-09-09 本文已影响6人 passMaker

每个 Vue 实例在被创建时都要经过一系列的初始化过程。如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

一个 Vue 实例

我们创建一个 Vue 实例，并在每个阶段验证 Vue 的生命周期函数。

Vue 实例的生命周期函数并不放置在 methods里，而是单独放置在 Vue 的实例之中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例生命周期函数</title>
  <script src='./vue.js'></script>
</head>
<body>
  <div id="app"></div>

  <script>

    //生命周期函数就是Vue实例在某一个时间点会自动执行的函数
    var vm = new Vue({
      el: "#app",
      template: "<div>{{test}}</div>",
      data: {
        test: "hello world"
      },
      // Vue初始化
      beforeCreate: function(){
        console.log('beforeCreate')
      },
      created: function(){
        console.log('created')
      },

      //页面渲染之前 挂载之前的时间点
      beforeMount: function(){
        console.log('beforeMount')
        console.log(this.$el)
      },
      // 挂载到页面之后
      mounted: function(){
        console.log('mounted')
        console.log(this.$el)
      },

      //当数据发生改变的时候 执行
      beforeUpdate: function(){
        console.log('beforeUpdate')
      },
      updated: function(){
        console.log('updated')
      },

      // vm.$destroy()被called的时候触发
      beforeDestroy: function(){
        console.log('beforeDestroy')
      },
      destroyed: function(){
        console.log('destroyed')
      }

    })

  </script>
</body>
</html>