Vue的生命周期

时间 2019-12-07

标签 vue 生命周期繁體版

原文原文链接

为何要认识Vue的生命周期

Vue的生命周期是一个很是重要的点，若是不懂Vue的生命周期，那么不少时候，就不知道Vue的实际渲染时机，程序中会出现各类bug。javascript

所以，学习Vue的生命周期是很是用必要的。css

简单认识生命周期

前期准备

下面咱们来画一个简单的生命周期图：html

new Vue()
                 ||
                 ||
                 ||
          初始化event和watch
                 ||
                 ||=====> beforeCreate
                 ||
       属性、方法、数据等内容的计算
                 ||
                 ||=====> created
                 ||
              存在el选项
                 ||
                 ||
                 ||
          不存在template选项
                 ||
                 ||=====> beforeMount
                 ||
         建立vm.$el替换el选项
                 ||
                 ||=====> mounted
                 ||
            当内容发生更新
                 ||
                 ||=====> beforeUpdate
                 ||
           虚拟DOM从新渲染
                 ||
                 ||=====> updated
                 ||
         调用vm.$destroy()
                 ||
                 ||=====> beforeDestroy
                 ||
     卸载watcher、子组件和事件监听=====> destroyed

生命周期图完成以后，根据这张图来写对应的代码：vue

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{message}}</h1>
    <ul>
      <li v-for="item in arr">{{item}}</li>
    </ul>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app', // 存在el选项，没有template选项
    data: {
      message: 'Vue的生命周期',
      arr: ['a', 'b', 'c']
    },
    beforeCreate: function () {
      console.group('<====== beforeCreate ======>')
      console.log("%c%s", "color:red", "el     : ", this.$el)
      console.log("%c%s", "color:red", "data   : ", this.$data)
      console.groupEnd('<====== beforeCreate ======>')
    },
    created: function () {
      console.group('<====== created ======>')
      console.log("%c%s", "color:red", "el     : ", this.$el)
      console.log("%c%s", "color:red", "data   : ", this.$data)
      console.groupEnd('<====== created ======>')
    },
    beforeMount: function () {
      console.group('<====== beforeMount ======>')
      console.log("%c%s", "color:red", "el     : ", this.$el)
      console.log("%c%s", "color:red", "data   : ", this.$data)
      console.groupEnd('<====== beforeMount ======>')
    },
    mounted: function () {
      console.group('<====== mounted ======>')
      console.log("%c%s", "color:red", "el     : ", this.$el)
      console.log("%c%s", "color:red", "data   : ", this.$data)
      console.groupEnd('<====== mounted ======>')
    },
    beforeUpdate: function () {
      console.group('<====== beforeUpdate ======>')
      console.log("%c%s", "color:red", "el     : ", this.$el)
      console.log("%c%s", "color:red", "data   : ", this.$data)
      console.groupEnd('<====== beforeUpdate ======>')
    },
    updated: function () {
      console.group('<====== updated ======>')
      console.log("%c%s", "color:red", "el     : ", this.$el)
      console.log("%c%s", "color:red", "data   : ", this.$data)
      console.groupEnd('<====== updated ======>')
    },
    beforeDestroy: function () {
      console.group('<====== beforeDestroy ======>')
      console.log("%c%s", "color:red", "el     : ", this.$el)
      console.log("%c%s", "color:red", "data   : ", this.$data)
      console.groupEnd('<====== beforeDestroy ======>')
    },
    destroyed: function () {
      console.group('<====== destroyed ======>')
      console.log("%c%s", "color:red", "el     : ", this.$el)
      console.log("%c%s", "color:red", "data   : ", this.$data)
      console.groupEnd('<====== destroyed ======>')
    }
  })
</script>

</html>

从头至尾看生命周期

运行上面的程序，会在控制台中看到前四个生命周期钩子：java

1.beforeCreateweb

在这个阶段，Vue实例中的事件监听和watch都已经初始化完成了。若是在Vue实例中写一个watch，就能够清晰的看出来了。segmentfault

2.createdapp

在这个阶段，Vue实例中的data、methods等内容都已经初始化完成了。函数

3.beforeMount学习

这个阶段会进行模板的渲染，把HTML结构渲染出来，可是Vue实例中的数据没有渲染到DOM中。

4.mounted

在这个阶段，el被新建立的vm.$el替换，并挂在到实例上去以后调用该钩子函数。这个时候，Vue实例中的data会被渲染到DOM中。

5.beforeUpdate和updated

下面，手动更新数据，来调用其余的钩子函数。

// 在控制台宏输入
vm.message='123'

在这个阶段，会更新数据，并从新渲染DOM和虚拟DOM。

6.beforeDestroy和destroyed

下面手动调用：

// 在控制台中输入
vm.$destroy()

在这个阶段会销毁Vue实例，生命周期结束。

Vue实例中的template

Vue实例中不存在template

若是Vue中不存在template选项，那么会把外部的HTML做为template进行渲染。

<body>
  <div id="app">
    <h1>外部HTML : {{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'this is a message'
    }
  })
</script>

显示的效果：

Vue实例中存在template

若是Vue实例中存在template，那么就会优先使用Vue实例中的template做为模板进行渲染。

<body>
  <div id="app">
    <h1>外部HTML : {{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    template: "<h1>Vue实例中的template : {{message}}</h1>",
    data: {
      message: 'this is a message'
    }
  })
</script>

显示的效果：

Vue实例中存在render函数

可是render函数更接近底层渲染机制，所以，存在render函数的话，render函数的优先级最高。

<body>
  <div id="app">
    <h1>外部HTML : {{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    template: "<h1>Vue实例中的template : {{message}}</h1>",
    data: {
      message: 'this is a message'
    },
    render: function (createElement) {
      return createElement('h1', 'render函数 : ' + this.message)
    }
  })
</script>

显示的效果：

Vue的生命周期

为何要认识Vue的生命周期

简单认识生命周期

前期准备

从头至尾看生命周期

Vue实例中的template

Vue实例中不存在template

Vue实例中存在template

Vue实例中存在render函数

参考连接