vue个人学习(四)----生命周期

生命周期:

beforeCreate          组件实例刚刚被创建,属性都没有
created                  实例已经创建完成,属性已经绑定
beforeMount          模板编译之前
mounted               模板编译之后,代替之前ready *
beforeUpdate        组件更新之前
updated               组件更新完毕 *
beforeDestroy      组件销毁前
destroyed            组件销毁后

书写方法:

				new Vue({
					el: "#box",
					data:{
						msg:‘hello!‘
					},
					beforeCreate(){
						console.log("组件实例刚刚被创建");
					},
					created(){
						console.log("实例已经创建完成");
					},
					beforeMount(){
						console.log("模板编译之前");
					},
					mounted(){
						console.log("模板编译完成");
					}
				});

  

生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过以后它会有帮助。

时间: 2024-10-05 09:14:55

vue个人学习(四)----生命周期的相关文章

Vue.js学习之生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会.例如,created 这个钩子在实例被创建之后被调用: var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log(

【Vue.js学习】生命周期及数据绑定

一.生命后期 官网的图片说明: Vue的生命周期总结 var app = new Vue({ el:"#app", beforeCreate: function(){ console.log('1-beforeCreate 初始化之前'); //加载loading }, created: function(){ console.log('2-created 创建完成'); //关闭loading }, beforeMount: function(){ console.log('3-be

vue嵌套组件的生命周期

vue嵌套组件的生命周期 问:有A.B.C三个组件,A为B的父组件,B为C的父组件,它们的创建和挂载顺序是怎样的?即(beforeCreate/created,beforeMounte/mounted)的执行顺序 代码演示 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewpo

前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({});2.实例化Vue时,需要传入一个参数(选

vue学习三:生命周期钩子

生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会. 这个生命周期钩子函数可以在官网上看到,只要记住最重要的mounted就可以了,是html进行发送请求后台进行数据交互的钩子函数: 这个生命周期函数的图片是可以在官网上看到的,所以可以进行官网进行理解: 比如 created 钩子可以用来在

vue 学前班003(生命周期)

ue把整个生命周期划分为创建.挂载.更新.销毁等阶段,每个阶段都会给一些"钩子"让我们来做一些我们想实现的动作.学习实例的生命周期,能帮助我们理解vue实例的运作机制,更好地合理利用各个钩子来完成我们的业务代码. 我们分别来看看这几个阶段: 1. beforeCreate 此阶段为实例初始化之后,此时的数据观察和事件配置都没好准备好. 我们试着console一下实例的数据data和挂载元素el,代码如下: <div id="app">{{name}}&l

Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项 需要注意的

servlet入门学习之生命周期

一. 什么是Servlet Servlet是用Java语言编写的服务器端小程序,驻留在web服务器中,并在其中运行,扩展了web服务器的动态处理功能. 用java语言编写的java类 在web容器中运行 用于处理客户端请求  静态网页技术---->传统的CGI技术----->Servlet技术 二.Servlet生命周期与工作原理 执行原理: 客户机将HTTP 请求发送给Web 服务器 Web 服务器将该请求转发给Servlet Servlet 处理该请求 Servlet 将响应发送给Web

react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之前对react使用不多,正好我目前在做的项目也在使用react+redux,借着这个机会系统的学习下react+redux. react是什么 react是一个JavaScript类库,通过react,我们可以构建可组合的UI,也就是说,我们可以通过重用组件来组合出我们的UI.可以说react的核心便是

React 学习(四) ---- 生命周期函数

现在我们能修改状态,页面可以进行交互了,但是还有一种状态改变没有解决,那就是倒计时效果,时间一直在变化,组件状态也一直在改变,但我们什么都没有做,如果要实现这样的效果,需要怎么处理? 我们都知道,改变状态用的是setState,  上次讲的加减操作是在把它写到事件处理函数中来改变状态的,但现在没有什么事件供我们调用,因为我们没有做任何操作,它却一直在变化,现在要做的就是找一个机会或入口,来写setState 函数, 这个机会就是组件的生命周期函数. 生命周期也是来源于对我们对现实生活的思考, 对