Vue 生命周期(钩子函数)

最新推荐文章于 2024-08-15 22:00:44 发布

书和咖啡

最新推荐文章于 2024-08-15 22:00:44 发布

阅读量869

点赞数 2

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/ivenqin/article/details/110224853

版权

Vue 专栏收录该内容

24 篇文章 4 订阅

订阅专栏

什么是生命周期

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

下图是官网中实例的生命周期示例图：

beforeCreate：是第一个生命周期函数，表示实例完全被创建出来之前会执行这个函数。在此函数执行时，data和methods中的属性与方法定义都还没有初始化。
created：是第一个生命周期函数，在此函数中，data 和 methods 都已经被初始化好了。
beforeMount：是第三个生命周期函数，表示模板已经在内存中编辑完成了，但是还没有被渲染到页面中。
mounted：第四个生命周期函数，此时内存中的模板已经挂载到了页面中，用户可以看到渲染好的页面。mounted是实例创建期间的最后一个生命周期函数，当此函数执行完毕，表示实例已经被完全创建好了。
beforeUpdate：此时界面还没有被更新。
updated：updated 事件执行的时候，页面和 data 数据已经保持同步。
beforeDestroy：销毁之前执行，当beforeDestroy函数执行时，表示vue实例已从运行阶段进入销毁阶段，vue实例身上所有的方法与数据都处于可用状态。
destroyed：当destroy函数执行时，组件中所有的方法与数据已经被完全销毁。

示例：

我们结合代码去看钩子函数的执行，例如下面这段代码：

<!DOCTYPE html>
<html>
<head>
    <title>Vue的属性、方法和生命周期_侠课岛(9xkd.com)</title>
    <script src="./src/vue.min.js" type="text/javascript" ></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
     <input type="button" @click="change" value="更新数据" />
     <input type="button" @click="destroy" value="销毁" />
</div>

<script type="text/javascript">
    
  var app = new Vue({
       el: '#app',
       data: {
          message : "侠课岛欢迎你" 
       },
       methods:{
            change() {
                this.message = '好好学习，天天向上';
            },
            destroy() {
                app.$destroy();
            }
        },
       beforeCreate: function () {
            console.group('beforeCreate 创建前状态：');
            console.log("%c%s", "color:gary" , "el     : " + this.$el); 
            console.log("%c%s", "color:gary","message: " + this.message)  
       },
       created: function () {
            console.group('created 创建完毕状态：');
            console.log("%c%s", "color:green","el     : " + this.$el); 
            console.log("%c%s", "color:green","message: " + this.message); 
       },
       beforeMount: function () {
            console.group('beforeMount 挂载前状态：');
            console.log("%c%s", "color:gary","el     : " + (this.$el)); 
            console.log("%c%s", "color:gary","message: " + this.message); 
       },
       mounted: function () {
            console.group('mounted 挂载结束状态：');
            console.log("%c%s", "color:orange","el     : " + this.$el); 
            console.log("%c%s", "color:orange","message: " + this.message);
       },
       beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态：');
            console.log("%c%s", "color:gary","el     : " + this.$el);
            console.log("%c%s", "color:gary","message: " + this.message); 
       },
       updated: function () {
            console.group('updated 更新完成状态：');
            console.log("%c%s", "color:Violet","el     : " + this.$el);
            console.log("%c%s", "color:Violet","message: " + this.message); 
       },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态：');
            console.log("%c%s", "color:gary","el     : " + this.$el);
            console.log("%c%s", "color:gary","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态：');
            console.log("%c%s", "color:blue","el     : " + this.$el);
            console.log("%c%s", "color:blue","message: " + this.message)
        }
    })
</script>
</body>
</html>

在浏览器中打开：

点击更新数据按钮：

点击销毁按钮：

钩子函数

一个指令定义对象可以提供如下几个钩子函数，这些钩子函数都是可选：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
unbind：只调用一次，指令与元素解绑时调用。
inserted：被绑定元素插入父节点时调用。
update：所在组件的 VNode 更新时调用，可能发生在其子 VNode 更新之前。
componentUpdated：指令所在组件的 VNode 及其子 VNode全部更新后调用。

钩子函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含属性有name、value、oldValue、arg、expression、modifiers等。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

钩子函数使用

下面是一个自定义钩子使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的学习_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <my-comp v-if="message" :msg="message"></my-comp>
    <button @click="change">更改</button>
  </div>
</body>
<script>
  Vue.directive('hello', {
    bind: function (el) {
      console.log('bind')
    },
    inserted: function (el) {
      console.log('inserted')
    },
    update: function (el) {
      console.log('update')
    },
    componentUpdated: function (el) {
      console.log('componentUpdated')
    },
    unbind: function (el) {
      console.log('unbind')
    }
  })
  var myComp = {
    template: '<h1 v-hello>{{msg}}</h1>',
    props: {
      msg: String
    }
  }
  new Vue({
    el: '#app',
    data(){
      return{
        message:"侠课岛"
      }
    },
    methods:{
      change: function () {
          this.message = '小飞侠'
      }
    },
    components: {
      myComp: myComp
    },
  });
</script>
</html>