Vue 快速入门(六)

本节介绍Vue生命周期和钩子函数的概念

01 - Vue生命周期概述

生命周期就是组件或者实例，从创建到被销毁（初始化化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载）的一系列过程，我们称这是Vue的生命周期。

生命周期展示图

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

上面这个图是官网的原图。下面是翻译过的图，完整的流程：

Vue的生命周期阶段

vue生命周期分为四个阶段
第一阶段（创建阶段）：beforeCreate，created
第二阶段（挂载阶段）：beforeMount（render），mounted
第三阶段（更新阶段）：beforeUpdate，updated
第四阶段（销毁阶段）：beforeDestroy，destroyed

02 - 钩子函数

Vue钩子函数就是：指在一个Vue实例从创建到销毁的过程自动执行的函数。

引用知乎 SpiritTracks 作者的话就是："在生命周期执行流程中预留的一个能让我们执行自己代码的地方。叫钩子函数，很形象的，钩子钩子，挂载我们自己的东西"

生命周期钩子函数

1. 创建前（beforeCreate）

官网：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

简析：在这个阶段，数据是获取不到的，并且真实dom元素也是没有渲染出来的，不能获得 DOM 节点。
2. 创建后（created）
    官网：在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
    详细：在这个阶段，可以访问到数据了，但是页面当中真实dom节点还是没有渲染出来，在这个钩子函数里面，可以进行相关初始化事件的绑定、发送请求操作。
3. 挂载前（beforeMount）
    官网：在挂载开始之前被调用：相关的 render 函数首次被调用。
    详细：代表dom马上就要被渲染出来了，但是却还没有真正的渲染出来，这个钩子函数与created钩子函数用法基本一致，可以进行相关初始化事件的绑定、发送ajax操作。
4. 挂载后（mounted）
    官网：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：
    详细：挂载阶段的最后一个钩子函数,数据挂载完毕，真实dom元素也已经渲染完成了,这个钩子函数内部可以做一些实例化相关的操作。
5. 更新前（beforeUpdate）
    官网：在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
    详细：这个钩子函数初始化的不会执行,当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行，这个钩子函数获取dom的内容是更新之前的内容。
6. 更新后（updated）
    官网：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
    详细：这个钩子函数获取dom的内容是更新之后的内容生成新的虚拟dom，新的虚拟dom与之前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。在updated钩子函数里面就可以获取到因diff算法比较差异得出来的真实dom渲染了。
7. 销毁前（beforeDestroy）
    官网：实例销毁之前调用。在这一步，实例仍然完全可用。
    详细：实例销毁之前调用。在这一步，实例仍然完全可用。当组件销毁的时候，就会触发这个钩子函数代表销毁之前，可以做一些善后操作，可以清除一些初始化事件、定时器相关的东西。
8. 销毁后（destroyed）
    官网：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
    详细：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。Vue实例失去活性，完全丧失功能。

总的来说生命周期就是8个钩子。
创建之前——创建
挂载之前——挂载
更新之前——更新
销毁之前——销毁
看到这4个操作有点类似CRUD感觉。

钩子函数示例

以下是钩子的代码：

<!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>Document</title>
</head>
<body>
  <div id = "app">
    <span id="name">{{ name }}</span>
    <button @click="updateName">更新</button>
    <button @click="destroy">销毁</button>
  </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      name:'hello !'
    },
    methods : {
      updateName() {
        console.log('准备修改名字啦！')
        this.name = 'hello Vue！'
      },
      destroy(){
        vm.$destroy()
      }
    },
    beforeCreate() {
      // 此时页面数据未初始化
      console.log('beforeCreate:' + this.name) // beforeCreate：undefined
    },
    created() {
      // 页面数据已经初始化
      console.log('created:' + this.name) // beforeCreate：hello !
    },
    beforeMount() {
      console.log('beforeMount:' + this.name) // beforeCreate：hello !
      console.log("html模板未渲染：" + document.getElementById("name").innerText);
    },
    mounted() {
      console.log('mounted:' + this.name) // beforeCreate：hello !
      console.log("html模板已渲染：" + document.getElementById("name").innerText);
    },
    // 点击更新按钮后会先触发 beforeUpdate
    beforeUpdate() { 
      console.log('beforeUpdate:' + this.name) // beforeCreate：hello 
      console.log("html模板未更新：" + document.getElementById("name").innerText);
    },
    updated() {
      console.log('updated:' + this.name) // updated hello 图灵 !
      console.log("html模板已更新：" + document.getElementById("name").innerText);
    },
    // 点击销毁按钮后会先触发 beforeDestroy
    beforeDestroy(){
      console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
      console.log("销毁前：" + document.getElementById("name").innerText);
    },
    destroyed(){
      console.log('destroyed: success') // destroyed: success
      // 在这之后点击页面 更新 按钮将无任何效果
      console.log("销毁后：" + document.getElementById("name").innerText);
    }
  });
</script>
</html>

代码运行并解析：
1. 当页面初始化挂载完成后的效果是：

2. 当数据改变之后又会触发beforeUpdate，updated两个钩子函数，效果如下：

3. 当销毁时，效果如下：

销毁之后实例上绑定的所有事件监听都被移除了，所有的子组件也都不存在了。但是已经存在的页面dom还是在的，页面的dom不能通过销毁实例而达到删除的效果，可以用v-if或者v-show来控制dom的显示与否，不要轻易手动调用destory去销毁实例。
注：在组件的整个生命周期内，钩子函数都是可被自动调用的，且生命周期函数的执行顺序与书写的顺序无关。

本节讲到这里，更多钩子函数使用可以参考官方文档。

posted @ 2023-01-24 17:07 全栈测试开发日记阅读(67) 评论(0) 收藏举报

刷新页面返回顶部

全栈测试开发日记

像蚂蚁一样工作，像蝴蝶一样生活

Vue 快速入门(六)

01 - Vue生命周期概述

02 - 钩子函数

公告