前端技术-vue 生命周期 | 学习笔记

简介: 简介:快速学习前端技术-vue 生命周期

开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):前端技术-vue 生命周期】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/667/detail/11311


前端技术-vue 生命周期


内容介绍

一、实例生命周期

二、vue 生命周期演示


一、实例生命周期

vue 在创建过程中有生命周期,指对象从创建到销毁过程

image.png

image.png

image.png

image.png

image.png

image.png

首先执行 beforeCreat,beforeCreat 表示在创建前执行 created 表示在数据渲染前进行,先执行 beforeCreat 再执行 created。数据渲染后执行 beforeMount 和mounted。

数据渲染内容进行修改执行 beforeUpdate 和 updated。页面循环完成以及数据渲染完成后执行 beforeDestroy,最后执行 destroy 将 vue 对象销毁。

重点掌握 created 和 mounted

 

二、vue生命周期演示

new  Vue({

el:'#app',

data:{

},

created(){

debugger

//在页面渲染之前执行  

console.log('created....'  },

},

mounted(){

debugger

//在页面渲染之后执行  

console. 1og('mounted....')

})

先生成 vue.html 代码加入 debugger 断点调试。前端加断点不如后端好用,但是也可以做到,程序到 debugger 加入处就会停止。

执行,刷新会出现 paused in debugger 提示,代表断点已经生效。

有两个操作,一个是半圆表示向下执行 stept over next function call。

箭头表示执行到下一个方法,也就是向下一个断点执行。目前断点到 created,点击箭头执行到下一个断点 mounted。

证明执行顺序是先 created 后 mounted

相关文章
|
4天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
9天前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
5天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
28 3
|
4天前
|
JavaScript 前端开发 API
如何在前端开发中有效管理状态:React vs. Vue
在现代前端开发中,状态管理是一个关键因素,它直接影响到应用的性能和可维护性。React 和 Vue 是当前最流行的前端框架,它们在状态管理方面各有优势和劣势。本文将深入探讨 React 和 Vue 在状态管理中的不同实现,分析它们的优缺点,并提供实际应用中的最佳实践,以帮助开发者选择最适合他们项目的解决方案。
|
18天前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
50 0
|
18天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
38 0
|
18天前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
30 0
|
11月前
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期
52 0
|
4月前
|
JavaScript 前端开发 开发者
vue实例、指令、生命周期
vue实例、指令、生命周期
51 1
|
4月前
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期