vue全家桶进阶之路13:生命周期
Vue2的生命周期是指Vue实例从创建、挂载、更新、销毁等各个阶段中所经历的一系列过程。Vue2的生命周期共有8个阶段,分别是:
beforeCreate
:Vue实例被创建之前的阶段,此时Vue实例的数据和事件都还未初始化。created
:Vue实例被创建之后的阶段,此时Vue实例的数据已经初始化,但是此时模板还未挂载到页面上。beforeMount
:Vue实例模板被挂载到页面之前的阶段。mounted
:Vue实例模板被挂载到页面之后的阶段,此时Vue实例已经可以访问DOM元素。beforeUpdate
:Vue实例数据更新之前的阶段,此时Vue实例中的数据已经更新,但是页面上的DOM还未被更新。updated
:Vue实例数据更新之后的阶段,此时Vue实例中的数据已经更新,并且页面上的DOM也已经被更新。beforeDestroy
:Vue实例被销毁之前的阶段,此时Vue实例的数据和事件都还可以被访问。destroyed
:Vue实例被销毁之后的阶段,此时Vue实例的数据和事件已经被销毁,无法再被访问。
Vue2的生命周期钩子函数可以用于在Vue实例不同的生命周期阶段中执行相应的操作。例如,在created
阶段可以对数据进行初始化,而在mounted
阶段可以执行一些需要访问DOM元素的操作。在Vue组件中,也可以使用组件的生命周期钩子函数来执行一些组件级别的操作。
下面是一个Vue实例的生命周期示例:
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">更新消息</button>
</div>
</template> <script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
beforeCreate() {
console.log('Vue实例被创建之前')
},
created() {
console.log('Vue实例被创建之后')
},
beforeMount() {
console.log('Vue实例模板被挂载到页面之前')
},
mounted() {
console.log('Vue实例模板被挂载到页面之后')
},
beforeUpdate() {
console.log('Vue实例数据更新之前')
},
updated() {
console.log('Vue实例数据更新之后')
},
beforeDestroy() {
console.log('Vue实例被销毁之前')
},
destroyed() {
console.log('Vue实例被销毁之后')
},
methods: {
updateMessage() {
this.message = 'Hello World!'
}
}
}
</script>
在上面的代码中,我们使用了Vue实例的生命周期钩子函数,并在控制台中输出相应的生命周期钩子函数调用时机的信息。当运行上面的代码时,在控制台中可以看到以下信息:
Vue实例被创建之前
Vue实例被创建之后
Vue实例模板被挂载到页面之前
Vue实例模板被挂载到页面之后
这是因为在这个示例中,我们只在Vue实例的创建和挂载阶段中使用了生命周期钩子函数。如果在页面上点击"更新消息"按钮,会触发Vue实例的updated
生命周期钩子函数,并在控制台中输出相应的信息。
总之,Vue2的生命周期钩子函数可以帮助我们在Vue实例不同的生命周期阶段中执行相应的操作,从而实现更加灵活和高效的开发。同时,需要注意生命周期钩子函数的使用时机和相应的调用顺序。
// 手动销毁Vue实例 app.$destroy();
vue全家桶进阶之路13:生命周期的更多相关文章
- Vue全家桶
简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- 升级vue全家桶过程记录
背景 如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死.原因是element-ui~2. ...
- [在线+源码]vue全家桶+Typescript开发一款习惯养成APP
# vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. [源码地址](https://github.com/xiaomuzhu/vue ...
- Nuxt + Vue 全家桶
引子 情由无中有,一旦有了,便万劫不复 简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建 ...
- vue证明题一,vue全家桶的构成
简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- 从零开始系列之vue全家桶(3)安装使用vuex
什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...
随机推荐
- php 中 session存储
转载网址: https://blog.csdn.net/miliu123456/article/details/107048378/ php 中 session 更换存储方式(file, redis, ...
- (原创)【B4A】一步一步入门07:EditText,文本框、密码框、键盘样式、提示文本(控件篇03)
一.前言 本篇教程,我们来讲一下常用的控件:EditText(文本输入框). 本篇教程将会讲解文本框的基本使用,如:提示文本.密码文本.键盘样式等. 相信看完的你,一定会有所收获! 本文地址:http ...
- java多线程--3 线程状态、线程方法、线程类型
java多线程--3 线程状态.线程方法.线程类型 线程状态 创建状态: **就绪状态: ** 进入状态: 创建状态:启动线程 阻塞状态:阻塞解除 运行状态:释放CPU资源 阻塞状态: 进入状态: 运 ...
- Java:数据表的字段设计了默认值0不生效的原因
在数据表里给字段设置了默认值为0,但是在插入的时候不生效,数据表设计如下 通过数据表生成的实体类 查看代码 @Data @TableName(value = "user") @No ...
- vue 前端项目创建
一.创建项目 将vue-admin-template-master 模板放入创建的 VS code 的工作空间.重命名为自己的项目. 模块获取方法:关注"Java程序员进阶",回复 ...
- VUE-生命周期/请求数据
使用方法 --- 4个before,4个ed,创造,装载,更新,销毁 初始化阶段 beforeCreate(){} // 准备怀孕 created(){} // 怀上了 *************** ...
- CPU内部的奥秘:代码是如何被执行的?
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:景明 我们以一段 C 代码为例,来看一下代码被编译成二进制 ...
- SimpleAdmin手摸手教学之:项目架构设计2.0
一.说明 在SimpleAdmin1.0版本中,我将整体项目结构分为三大块,分别为架构核心.业务模块和应用服务.随着1.0版本的封版,回去再看我之前的项目架构,也暴露了一些问题,比如在1.0版本中,S ...
- 为kubernetes(k8s)单独配置kubectl工具
介绍 Kubernetes API 是一个 HTTP REST API.这个 API 是真正的 Kubernetes 用户界面,通过它可以完全控制它.这意味着每个 Kubernetes 操作都作为 A ...
- 【CTF】日志 2019.7.13 pwn 堆溢出基础知识
十六进制两位表示一个字节 堆溢出 先上堆图: 堆的数据结构 一般情况下,物理相邻的两个空闲 chunk 会被合并为一个 chunk struct malloc_chunk { INTERNAL_SIZ ...