学习vue——vue.js入门(四)

最新推荐文章于 2024-09-24 10:31:38 发布

李乡瑞

最新推荐文章于 2024-09-24 10:31:38 发布

阅读量316

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_41713731/article/details/105850899

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

这篇博客详细介绍了Vue.js的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等8个主要钩子函数。每个阶段的作用、官方说明和适用场景都有所阐述，特别是强调了在不同阶段对数据和DOM的操作时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue生命周期

vue有11个声明周期钩子函数，都在下图展示，下面我们说一下主要的四个阶段前后的主要的8个钩子函数。

在这里插入图片描述

初始化阶段，el和dom都还没有生成的有两个钩子函数，分别是beforeCreate和created

beforeCreate钩子函数实例创建前后

beforeCreate为vue初始化过程中第一个钩子函数
官方说明：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
解释：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；
vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
可以做页面拦截。当进一个路由的时候我们可以判断是否有权限进去，是否安全进去，携带参数是否完整，参数是否安全。使用这个钩子好函数的时候就避免了让页面去判断，省掉了创建一个组建Vue实例。可以做自定义重定向。当路由还没有进去时我们判断是否正确进去，若不正确进去可以重定向到指定的页面。

created钩子函数实例创建前后

created为vue初始化后第一个钩子函数
官方说明：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始， $e l 属性目前不可见。解释说明：这个时候可以操作 v u e 实例中的数据和各种方法，但是还不能对 " d o m " 节点进行操作； v u e 实例的数据对象 d a t a 有了，$ el还没有
通常我们用来初始化一些数据，比如从数据库查询出来一些数据，赋值给data里面的对象，此时data里面的对象已经存在了，只是没有数据，这个阶段的模板还没有被生成html，一些要通过操作页面赋值的处理，不能成功，并会报错。

beforeMount钩子函数页面渲染前后

beforeMount挂载阶段前的第一个钩子函数
官方说明：在挂载开始之前被调用：相关的 render 函数首次被调用。
vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的dom还未生成。

mounted钩子函数页面渲染前后

官方说明：el 被新创建的 vm. $e l 替换，并挂载到实例上去之后调用该钩子。如果 r o o t 实例挂载了一个文档内元素，当 m o u n t e d 被调用时 v m .$ el 也在文档内。
解释说明：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行
mounted钩子函数最适合的就是操作dom，因为这个阶段模板已经生成具体的html，生成具体的dom，这个时候我们通过页面属性可以操作数据了，这就是通常我们使用需要操作页面属性的工具库时，只能在mounted里面加载使用，例如jsPlumb（流程图或拓扑图绘制工具库）

beforeUpdate钩子函数数据更新前后

beforeUpdate钩子函数data更新时触发，可以获取更新前的vue实例数据

updated钩子函数数据更新前后

data更新时触发
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
beforeUpdate钩子函数和updated钩子函数，当很多数据更新时，使用此函数会浪费资源。一般用 watch 检测 data中某个数据的变化。

beforeDestroy钩子函数组件销毁前后

实例销毁之前调用。在这一步，实例仍然完全可用，所以如果跳转页面时更新数据，可以在这个函数内操作。

destroyed钩子函数组件销毁前后

组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在

<template>
  <div>
      <h1>{{msg}}</h1>
      <button @click="fnUpdate()">更新数据</button>
  </div>
</template>

<script>
export default {
  //注册组件
  components: {},
  //数据
  data() {
    return {
        msg :"你好"
    };
  },
  //方法
  methods: {
      fnUpdate(){
          let that = this;
          that.msg = "我好"
      }
  },
  //计算属性
  computed: {},
  //过滤器
  filters: {},
  beforeCreate(){
      console.log("1.1实例创建前")
  },
  created(){
      console.log("1.2实例创建后，但是还没有dom，data已经存在了，可以更新data里面的对象信息。");
  },
  beforeMount(){
      console.log("2.1挂载dom前，el已经存在了，但是还没有真实的dom");
  },
  mounted(){
      console.log("2.2已经挂载dom，真实dom已经存在，可以操作dom元素");
  },
  beforeUpdate(){
      console.log("3.1更新数据前，只有更新数据时才会走");
  },
  updated(){
      console.log("3.2更新数据完毕，只有更新数据时才会走");
  },
  beforeDestroy(){
      console.log("4.1销毁前，此时的实例完全可用");
  },
  destroyed(){
      console.log("4.2销毁后，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在");
  },

};
</script>

<style  scoped>
</style>