Vue生命周期

最新推荐文章于 2024-09-07 16:00:00 发布

原创最新推荐文章于 2024-09-07 16:00:00 发布 · 239 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Vue生命周期

Vue 专栏收录该内容

3 篇文章

订阅专栏

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
在这里插入图片描述

钩子函数

例1：created代表在vue实例创建后；我们可以在Vue中定义一个created函数，代表这个时期的构造函数：

<div id="app">
    {{hello}}
</div>

<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           hello:''
       },
       created(){
           this.hello = 'czdx,一统江湖，千秋万代'
       }
    });
</script>

结果：
在这里插入图片描述

例2，Vue中各大钩子函数测试代码如下：

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>vuejs生命周期</title>
      <script src="vuejs-2.5.17.js"></script>
   </head>

   <body>
      <div id="app">
         {{message}}
      </div>
   </body>
   <script>
      var vm = new Vue({
         el: "#app",
         data: {
            message: 'hello world'
         },
         beforeCreate: function() {
            showData('创建vue实例前', this);
         },
         created: function() {
            showData('创建vue实例后', this);
         },
         beforeMount: function() {
            showData('挂载到dom前', this);
         },
         mounted: function() {
            showData('挂载到dom后', this);
         },
         beforeUpdate: function() {
            showData('数据变化更新前', this);
         },
         updated: function() {
            showData('数据变化更新后', this);
         },
         beforeDestroy: function() {
            showData('vue实例销毁前', this);
         },
         destroyed: function() {
            showData('vue实例销毁后', this);
         }
      });

      function realDom() {
         console.log('真实dom结构：' + document.getElementById('app').innerHTML);
      }

      function showData(process, obj) {
         console.log(process);
         console.log('data 数据：' + obj.message)
         console.log('挂载的对象：')
         console.log(obj.$el)
         realDom();
         console.log('------------------')
         console.log('------------------')
      }
      vm.message = "good...";
      vm.$destroy();
   </script>

</html>