Vue 实例的生命周期

最新推荐文章于 2024-09-09 09:35:48 发布
最新推荐文章于 2024-09-09 09:35:48 发布
阅读量99 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000018069665
版权

在 Vue 中，每个实例都有自己的一个完整的生命周期，包括开始创建 —— 初始化数据 —— 编译模板 —— 将实例挂载到 DOM —— 渲染 —— 更新 —— 渲染 —— 卸载等一系列过程。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这样我们就可以在实例生命周期的不同阶段做一些需要做的事情。

一、vue 实例和组件的区别

这里可能会有个小疑惑，怎么突然又说是 Vue 实例呢？实例和组件有什么区别吗？

在 SPA（Single Page Application） 应用中，我们只会创建一个 Vue 根实例，整个应用都是通过这个根实例启动的。在通过 vue-cli 脚手架生成的项目中， main.js 里创建了 Vue 根实例：
<!-- more -->

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
});

通过 new Vue() 创建一个 Vue 实例。在实例化 Vue 时，需要传入一个选项对象，它可以包含挂载元素 el、路由router、模板 template、数据 data、方法 methods、生命周期钩子等选项。

Vue 组件是被扩展的 Vue 实例。同 Vue 实例类似，它也需要传入一个选项对象，包含数据、模板、生命周期钩子函数等等。在前面我们只介绍了单文件组件的方式来创建组件，也可以这样来创建一个组件：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

可以发现，和创建 Vue 实例非常的类似，所有的 Vue 组件同时都是 Vue 的实例。所以我们说：实例的生命周期也叫做组件的生命周期。

二、Vue 实例的生命周期

Vue 实例从创建到销毁的过程，就是生命周期。文章的开头我们提到了生命周期钩子函数，它是框架提供的函数，能够让开发人员的代码参与到组件的生命周期中。也就是说，通过钩子函数，可以控制组件的行为。这里有两个点需要记住：

  • 在 Vue 实例的的生命周期中，会自动调用这些生命周期函数，我们只需要提供这些钩子函数即可；
  • 生命周期钩子函数的名字是固定的，不可更改，不可以自定义或者添加钩子函数。

生命周期图示：

lifecycle

图中，红色矩形框代表着在生命周期对应阶段的钩子函数。

三、生命周期函数

我们通过三种案例来学习生命周期函数：

  • 单组件的生命周期
  • 父子组件的生命周期
  • 兄弟组件的生命周期

案例中，通过打开控制台查看钩子函数打印的内容来学习。

1、单组件的生命周期
<template>
  <div class='container'>
    <h3>单组件的生命周期（打开控制台查看）</h3>
    <button @click='dataVar += 1'>更新 {{dataVar}}</button>
    <button @click='handleDestroy'>销毁</button>
  </div>
</template>

<script>
const compName = 'single';

export default {
  name: 'SingleComLifecycle',
  data() {
    return {
      dataVar: 1,
    };
  },
  beforeCreate() {
    console.log(`--${compName}--beforeCreate`); // eslint-disable-line
  },
  created() {
    console.log(`--${compName}--created`); // eslint-disable-line
  },
  beforeMount() {
    console.log(`--${compName}--beforeMount`); // eslint-disable-line
  },
  mounted() {
    console.log(`--${compName}--mounted`); // eslint-disable-line
  },
  beforeUpdate() {
    console.log(`--${compName}--beforeUpdate`); // eslint-disable-line
  },
  updated() {
    console.log(`--${compName}--updated`); // eslint-disable-line
  },
  beforeDestroy() {
    console.log(`--${compName}--beforeDestroy`); // eslint-disable-line
  },
  destroyed() {
    console.log(`--${compName}--destroyed`); // eslint-disable-line
  },
  methods: {
    handleDestroy() {
      this.$destroy();
    },
  },
};
</script>


<style lang="postcss" scoped>
.container {
  width: 70%;
  margin: 0 auto;
  background-color: aliceblue;
  padding: 50px;
  text-align: center;
}
button {
  padding: 6px;
  background-color: #35b880;
  border: none;
  color: white;
  font-size: 16px;
  margin: 5px;
}
</style>

初始化组件时打印：

--single--beforeCreate
--single--created
--single--beforeMount
--single--mounted

data 中的数据变化时打印：

--single--beforeUpdate
--single--updated

组件销毁时打印：

--single--beforeDestroy
--single--destroyed

所以我们可以得出以下结论：

  • 初始化组件时，仅执行了 beforeCreate/Created/beforeMount/mounted 四个钩子函数
  • 当改变 data 中定义的变量（响应式变量）时，会执行 beforeUpdate/updated 钩子函数
  • 当切换组件（当前组件未缓存）时，会执行 beforeDestory/destroyed 钩子函数
  • 初始化和销毁时的生命钩子函数均只会执行一次，beforeUpdate/updated 可多次执行
2、父子组件的生命周期

创建一个父组件：

<template>
  <div class='container'>
    <h3>父子组件的生命周期（打开控制台查看）</h3>
    <child-com :compName='dataVar.toString()'></child-com>
    <button @click='dataVar += 1'>父组件更新 {{dataVar}}</button>
    <button @click='handleDestroy'>父组件销毁</button>
  </div>
</template>

<script>
import ChildCom from './ChildCom';

const COMPONENT_NAME = 'parent';
export default {
  data() {
    return {
      dataVar: 1,
    };
  },
  components: {
    'child-com': ChildCom,
  },
  beforeCreate() {
    console.log(`--${COMPONENT_NAME}--beforeCreate`); // eslint-disable-line
  },
  created() {
    console.log(`--${COMPONENT_NAME}--created`); // eslint-disable-line
  },
  beforeMount() {
    console.log(`--${COMPONENT_NAME}--beforeMount`); // eslint-disable-line
  },
  mounted() {
    console.log(`--${COMPONENT_NAME}--mounted`); // eslint-disable-line
  },
  beforeUpdate() {
    console.log(`--${COMPONENT_NAME}--beforeUpdate`); // eslint-disable-line
  },
  updated() {
    console.log(`--${COMPONENT_NAME}--updated`); // eslint-disable-line
  },
  beforeDestroy() {
    console.log(`--${COMPONENT_NAME}--beforeDestroy`); // eslint-disable-line
  },
  destroyed() {
    console.log(`--${COMPONENT_NAME}--destroyed`); // eslint-disable-line
  },
  methods: {
    handleDestroy() {
      this.$destroy();
    },
  },
};
</script>


<style lang="postcss" scoped>
.container {
  width: 70%;
  margin: 20px auto;
  background-color: aliceblue;
  padding: 50px;
  text-align: center;
}
button {
  padding: 6px;
  background-color: #2196f3;
  border: none;
  color: white;
  font-size: 16px;
  margin: 5px;
}
</style>

创建一个子组件：

<template>
  <div>
    <div>父组件传递的props：{{compName}}</div>
    <button @click='dataVar += 1'>子组件更新 {{dataVar}}</button>
    <button @click='handleDestroy'>子组件销毁</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataVar: 1,
    };
  },
  props: {
    compName: {
      type: String,
      default: 'single',
    },
  },
  beforeCreate() {
    console.log(` --此时data未初始化--child--beforeCreate`); // eslint-disable-line
  },
  created() {
    console.log(`--${this.compName}--child--created`); // eslint-disable-line
  },
  beforeMount() {
    console.log(`--${this.compName}--child--beforeMount`); // eslint-disable-line
  },
  mounted() {
    console.log(`--${this.compName}--child--mounted`); // eslint-disable-line
  },
  beforeUpdate() {
    console.log(`--${this.compName}--child--beforeUpdate`); // eslint-disable-line
  },
  updated() {
    console.log(`--${this.compName}--child--updated`); // eslint-disable-line
  },
  beforeDestroy() {
    console.log(`--${this.compName}--child--beforeDestroy`); // eslint-disable-line
  },
  destroyed() {
    console.log(`--${this.compName}--child--destroyed`); // eslint-disable-line
  },
  methods: {
    handleDestroy() {
      this.$destroy();
    },
  },
};
</script>

<style lang="postcss" scoped>
button {
  padding: 6px;
  background-color: #35b880;
  border: none;
  color: white;
  font-size: 16px;
  margin: 5px;
}
</style>

初始化组件时打印：

--parent--beforeCreate
--parent--created
--parent--beforeMount
--此时data未初始化--child--beforeCreate
--1--child--created
--1--child--beforeMount
--1--child--mounted
--parent--mounted

当子组件 data 中的值变化时打印：

--1--child--beforeUpdate
--1--child--updated

当父组件 data 中的值变化时打印（子组件接受了父组件传递的 props）：

--parent--beforeUpdate
--2--child--beforeUpdate
--2--child--updated
--parent--updated

当子组件销毁时打印：

--1--child--beforeDestroy
--1--child--destroyed

当父组件销毁时打印：

--parent--beforeDestroy
--1--child--beforeDestroy
--1--child--destroyed
--parent--destroyed

结论：

  • 仅当子组件完成挂载后，父组件才会挂载
  • 父子组件在 data 变化中是分别监控的，但是在更新 props 中的数据是关联的
  • 销毁父组件时，先将子组件销毁后才会销毁父组件
3、兄弟组件的生命周期

创建一个单组件：

<template>
  <div class='container'>
    <button @click='dataVar += 1'>更新 {{dataVar}}</button>
    <button @click='handleDestroy'>销毁</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataVar: 1,
    };
  },
  props: {
    compName: {
      type: String,
      default: 'single',
    },
  },
  beforeCreate() {
    console.log(`--此时data未初始化--beforeCreate`); // eslint-disable-line
  },
  created() {
    console.log(`--${this.compName}--created`); // eslint-disable-line
  },
  beforeMount() {
    console.log(`--${this.compName}--beforeMount`); // eslint-disable-line
  },
  mounted() {
    console.log(`--${this.compName}--mounted`); // eslint-disable-line
  },
  beforeUpdate() {
    console.log(`--${this.compName}--beforeUpdate`); // eslint-disable-line
  },
  updated() {
    console.log(`--${this.compName}--updated`); // eslint-disable-line
  },
  beforeDestroy() {
    console.log(`--${this.compName}--beforeDestroy`); // eslint-disable-line
  },
  destroyed() {
    console.log(`--${this.compName}--destroyed`); // eslint-disable-line
  },
  methods: {
    handleDestroy() {
      this.$destroy();
    },
  },
};
</script>


<style lang="postcss" scoped>
.container {
  width: 70%;
  margin: 0 auto;
  background-color: aliceblue;
  padding: 10px;
  text-align: center;
}
button {
  padding: 6px;
  background-color: #35b880;
  border: none;
  color: white;
  font-size: 16px;
  margin: 5px;
}
</style>

引入两个单组件，构建兄弟组件：

<template>
  <div class='container'>
    <h3>兄弟组件的生命周期（打开控制台查看）</h3>
    <div>兄弟1
      <single compName='cihld1'></single>
    </div>
    <div>兄弟2
      <single compName='child2'></single>
    </div>
    <div>
      <p>兄弟两个的父亲</p>
      <button @click='dataVar += 1'>更新 {{dataVar}}</button>
      <button @click='handleDestroy'>销毁</button>
    </div>
  </div>
</template>

<script>
import Single from './Single';

const COMPONENT_NAME = 'parent';
export default {
  data() {
    return {
      dataVar: 1,
    };
  },
  components: {
    single: Single,
  },
  beforeCreate() {
    console.log(`--${COMPONENT_NAME}--beforeCreate`); // eslint-disable-line
  },
  created() {
    console.log(`--${COMPONENT_NAME}--created`); // eslint-disable-line
  },
  beforeMount() {
    console.log(`--${COMPONENT_NAME}--beforeMount`); // eslint-disable-line
  },
  mounted() {
    console.log(`--${COMPONENT_NAME}--mounted`); // eslint-disable-line
  },
  beforeUpdate() {
    console.log(`--${COMPONENT_NAME}--beforeUpdate`); // eslint-disable-line
  },
  updated() {
    console.log(`--${COMPONENT_NAME}--updated`); // eslint-disable-line
  },
  beforeDestroy() {
    console.log(`--${COMPONENT_NAME}--beforeDestroy`); // eslint-disable-line
  },
  destroyed() {
    console.log(`--${COMPONENT_NAME}--destroyed`); // eslint-disable-line
  },
  methods: {
    handleDestroy() {
      this.$destroy();
    },
  },
};
</script>

<style lang="postcss" scoped>
.container {
  width: 70%;
  margin: 5px auto;
  background-color: aliceblue;
  padding: 50px;
  text-align: center;
}
button {
  padding: 6px;
  background-color: #2196f3;
  border: none;
  color: white;
  font-size: 16px;
  margin: 5px;
}
</style>

初始化组件时打印：

--parent--beforeCreate
--parent--created
--parent--beforeMount
--此时data未初始化--beforeCreate
--cihld1--created
--cihld1--beforeMount
--此时data未初始化--beforeCreate
--child2--created
--child2--beforeMount
--cihld1--mounted
--child2--mounted
--parent--mounted

当 child1 更新和销毁时，打印：

--cihld1--beforeUpdate
--cihld1--updated
--cihld1--beforeDestroy
--cihld1--destroyed

当 child2 更新和销毁时，打印：

--cihld2--beforeUpdate
--cihld2--updated
--cihld2--beforeDestroy
--cihld2--destroyed

当父组件销毁时，打印：

--parent--beforeDestroy
--cihld1--beforeDestroy
--cihld1--destroyed
--child2--beforeDestroy
--child2--destroyed
--parent--destroyed

结论：

  • 组件的初始化（mounted之前）分开进行，挂载是从上到下依次进行
  • 当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的
欢迎关注我的博客： https://togoblog.cn/
weixin_34128534
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中的scoped坑点
sdo2605587的博客
01-23 1万+
今天在覆盖iview组件样式的时候发现一个问题，就是无法覆盖组件原有的样式，最后在github的issue中找到了答案： 不要使用scoped属性。于是我查找了下关于scoped的文章。 我们假设把这种组件叫做模块私有组件，其他的未加scoped的叫做模块一般组件。通过查看DOM结构发现：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。
Vue实例的生命周期
weixin_69270668的博客
09-12 307
Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程，称这是Vue的⽣命周期
Vue实例中生命周期created和mounted的区别详解
12-01
前言 本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。 再上图，
【Vue】实例对象的生命周期（方法详解）
jingjing的博客
08-28 763
通过前面的学习，我们知道使用Vue的时候必须创建一个Vue实例对象：var vm = new Vue({...})，那么这个Vue实例的生命周期是怎么样的呢？本文我们就来详细的介绍下。 上图是Vue官方给出的生命周期的流程图，可先大概浏览一下，看不懂没关系，下面将为大家介绍生命周期中各个方法的具体作用。 1、beforeCreate 生命周期的第一个方法，表示实例被创建出来之前被调用。此时，此时Vue实例中的 data 和 methods的内容都还没有被加载。 <div id="app">&l
vue中scoped的实现以及如何使用PostCSS转义css使其成为局部作用样式
hello，是翠花呀
06-04 1192
scoped 我们在vue中写css样式时，有时候会在style标签上添加scoped属性，这样这个vue组件里的样式就不会污染到其他组件中了。 <style scoped> </style> 但是这时候如果引用了第三方库，比如element、ant-design啥的，这时候修改他们的样式就需要增加额外的符号或命令去更改： 比如，我们可以使用deep，或者>>>符号： <style lang="less" scoped> .this-page {
组件中style标签lang属性和scoped属性的介绍
ADLF
01-06 9523
scoped只让样式渲染本组件，不会全局渲染
Vue实例生命周期
weixin_44904482的博客
09-14 4067
Vue实例的生命周期
Vue 实例生命周期钩子
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
03-31 593
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 比如 created 钩子可以用来在一个实例被创建之后执行代码 new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is
基于Vue实例生命周期(全面解析)
08-29
"基于Vue实例生命周期(全面解析)" Vue实例生命周期是指从创建到销毁的整个生命周期过程。在这个过程中，Vue实例会经历多个阶段，每个阶段都提供了生命周期钩子函数，以便开发者在合适的时机执行业务逻辑。 ...
vue3.0生命周期的示例代码
10-14
### Vue3.0生命周期知识点详解 #### Vue组件生命周期概述 在Vue框架中，每个组件从创建到销毁都会经历一系列的阶段。为了在这些阶段中执行特定的代码，Vue为开发者提供了生命周期钩子函数。Vue2.x版本中已经对生命...
vue中style lang="scss" scoped中的scoped
热门推荐
庭落
09-18 2万+
表示局部部署 没有的话里面的css样式会在所有组件中进行渲染
JS都有哪些操作数组的方法
ggq53219的博客
09-04 566
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
软件著作权申请教程（超详细）（2024新版）软著申请
最新发布
m0_75269526的博客
09-09 1147
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 515
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 964
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 1318
hiprint
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1009
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
Vue实例生命周期详解：从创建到销毁
Vue实例生命周期是指在Vue应用中的各个阶段，开发者可以利用预定义的钩子函数来执行特定的业务逻辑。这些阶段按照从初始化到销毁的顺序依次为：`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值