Vue_(组件)实例生命周期钩子
Vue生命周期中文文档 传送门
Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期；
Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，我们可以通过这些方法在Vue实例创 建、挂载、数据更新、销毁等阶段做一些事情
Vue的生命周期钩子方法：
beforeCreate
created
beforeMount
mounted
beforeUpdate
update
activated
deactivated
beforeDestroy
destroyed
errorCaptured
Learn
一、beforeCreate和created钩子方法
二、beforeMount和mounted钩子方法
三、beforeUpdate和updated钩子方法
四、 beforeDestroy和Destory钩子方法
项目结构
【每个demo下方都存有html源码】
一、beforeCreate和created钩子方法
body中放有v-model绑定的msg信息
<div>
<input type="text" v-model="msg" /><br />
<h1>{{msg}}</h1>
</div>
使用beforeCreate和created钩子函数
beforeCreate(){
alert("beforeCreate() 创建Vue实例(未进行数据观测)"+this.msg);
},
created(){
alert("created() 创建Vue实例(进行数据观测)"+this.msg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
window.onload= ()=>{ new Vue({
el:'div',
data:{
msg:'Hello Gary!!'
},
beforeCreate(){
alert("beforeCreate() 创建Vue实例(未进行数据观测)"+this.msg);
},
created(){
alert("created() 创建Vue实例(进行数据观测)"+this.msg);
} });
} </script> </head>
<body>
<div>
<input type="text" v-model="msg" /><br />
<h1>{{msg}}</h1>
</div> </body>
</html> Gary_VueShop.html
Gary_lifeCycle.html
二、beforeMount和mounted钩子方法
未获取<h1>DOM对象，给<h1>标签添加一个ref属性
<div>
<input type="text" v-model="msg" /><br />
<h1 ref="msgText">{{msg}}</h1>
</div>
beforeMount(){
alert("3 beforeMount 挂载Vue实例 前 " + this.msg + this.$refs.msgText.innerText);
},
mounted(){
alert("4 mounted 已经挂载Vue实例了 " + this.msg + this.$refs.msgText.innerText);
}
可以看到，在执行beforeMount()方法时，控制台出现报错，找不到该DOM元素！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
window.onload= ()=>{ new Vue({
el:'div',
data:{
msg:'Hello Gary!!'
},
beforeCreate(){
alert("beforeCreate() 创建Vue实例(未进行数据观测)" + this.msg);
},
created(){
alert("created() 创建Vue实例(进行数据观测)" + this.msg);
},
beforeMount(){
alert("beforeMount 挂载Vue实例 前 " + this.msg + this.$refs.msgText.innerText);
},
mounted(){
alert("mounted 已经挂载Vue实例了 " + this.msg + this.$refs.msgText.innerText);
} });
} </script> </head>
<body>
<div>
<input type="text" v-model="msg" /><br />
<h1 ref="msgText">{{msg}}</h1>
</div> </body>
</html>
Gary_lifeCycle.html
三、beforeUpdate和updated钩子方法
当更新了input中文本后会触发beforeUpdate和updated钩子函数
beforeUpdate(){
alert("beforeUpdate 数据 更新前" + this.$refs.msgText.innerText);
},
updated(){
alert("updated 数据 更新后 " + this.$refs.msgText.innerText);
}
beforeUpdate钩子函数this.$refs.msgText.innerText会获得跟新前的文本数据
updated钩子函数this.$refs.msgText.innerText会获得跟新后的文本数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
window.onload= ()=>{ new Vue({
el:'div',
data:{
msg:'Hello Gary!!'
},
beforeCreate(){
alert("beforeCreate() 创建Vue实例(未进行数据观测)" + this.msg);
},
created(){
alert("created() 创建Vue实例(进行数据观测)" + this.msg);
},
beforeMount(){
alert("beforeMount 挂载Vue实例 前 " + this.msg + this.$refs.msgText.innerText);
},
mounted(){
alert("mounted 已经挂载Vue实例了 " + this.msg + this.$refs.msgText.innerText);
},
beforeUpdate(){
alert("beforeUpdate 数据 更新前" + this.$refs.msgText.innerText);
},
updated(){
alert("updated 数据 更新后 " + this.$refs.msgText.innerText);
} });
} </script> </head>
<body>
<div>
<input type="text" v-model="msg" /><br />
<h1 ref="msgText">{{msg}}</h1>
</div> </body>
</html>
Gary_lifeCycle.html
四、beforeDestroy和Destory钩子方法
添加Button组件，给Button组件绑定onDestroy销毁方法
<div>
<input type="text" v-model="msg" /><br />
<h1 ref="msgText">{{msg}}</h1>
<button @click="onDestroy">销毁</button>
</div>
beforeDestroy(){
alert("beforeDestroy 销毁 前 ");
},
destroyed(){
alert("updated 销毁 后");
},
methods: {
onDestroy(){
this.$destroy();
}
}
当实例被销毁后就无法观测deforeUpdate钩子函数和updated方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
window.onload= ()=>{ new Vue({
el:'div',
data:{
msg:'Hello Gary!!'
},
beforeCreate(){
alert("beforeCreate() 创建Vue实例(未进行数据观测)" + this.msg);
},
created(){
alert("created() 创建Vue实例(进行数据观测)" + this.msg);
},
beforeMount(){
alert("beforeMount 挂载Vue实例 前 " + this.msg + this.$refs.msgText.innerText);
},
mounted(){
alert("mounted 已经挂载Vue实例了 " + this.msg + this.$refs.msgText.innerText);
},
beforeUpdate(){
alert("beforeUpdate 数据 更新前" + this.$refs.msgText.innerText);
},
updated(){
alert("updated 数据 更新后 " + this.$refs.msgText.innerText);
},
beforeDestroy(){
alert("beforeDestroy 销毁 前 ");
},
destroyed(){
alert("updated 销毁 后");
},
methods: {
onDestroy(){
this.$destroy();
}
}
});
} </script> </head>
<body>
<div>
<input type="text" v-model="msg" /><br />
<h1 ref="msgText">{{msg}}</h1>
<button @click="onDestroy">销毁</button>
</div> </body>
</html>
Gary_lifeCycle.html
Vue_(组件)实例生命周期钩子的更多相关文章
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- 前端（二十）—— vue介绍：引用vue、vue实例、实例生命周期钩子
vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...
- Angular25 组件的生命周期钩子
1 生命周期钩子概述 组件共有9个生命周期钩子 1.1 生命周期的执行顺序 技巧01:测试时父组件传递对子组件的输入属性进行初始化操作 import { Component, Input, Simpl ...
- 通俗易懂了解Vue组件的生命周期
1.前言 在使用vue2.0进行日常开发中,我们总有这样的需求,我就想在页面刚一加载出这个表格组件时就发送请求去后台拉取数据,亦或者我想在组件加载前显示个loading图,当组件加载出来就让这个loa ...
- Vue项目的创建、路由、及生命周期钩子
目录 一.Vue项目搭建 1.环境搭建 2.项目的创建 3.pycharm配置并启动vue项目 4.vue项目目录结构分析 5.Vue根据配置重新构建依赖 二.Vue项目创建时发生了什么 三.项目初始 ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- 浅析vue实例的生命周期（生命周期钩子）
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- Vue 组件生命周期钩子
Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...
随机推荐
- JSON函数表
jsoncpp 主要包含三个class:Value.Reader.Writer.注意Json::Value 只能处理 ANSI 类型的字符串,如果 C++ 程序是用 Unicode 编码的,最好加一个 ...
- 管家婆crm9.2 sp2升级问题求助及解决方案
升级过程中发生如下问题: 弹出对话框1:升级完成,但是有错误产生. 弹出对话框2:升级数据库发生错误:An attempt was made to load an assembly from a ne ...
- 解决centos-yum无法正常使用问题
刚刚最小化方式安装了CentOS 7 后,说实话,真不习惯也不喜欢纯shell方式工作,使用root账号登入后,马上想安装GNOME,但是发现yum不能正常工作!!! 一,输入安装X Window命令 ...
- vue-$watch属性方法
特性 https://www.cnblogs.com/widgetbox/p/8954162.html https://segmentfault.com/a/1190000012948175?utm_ ...
- vue-cli实现原理
分析:https://kuangpf.com/vue-cli-analysis/create/basic-verification.html vue-cli-service :https://blog ...
- vue事件处理机制
<button @click="handleAdd1()">add1</button> <button @click="handleAdd2 ...
- Caused by: java.lang.UnsatisfiedLinkError: Couldn't load 。。。。
最近需要做个有地图搜索功能的模块,用到百度地图SDK,但是从官网上下载SDK后导入工程,修改apiKey后,还是无法运行,总是抱这个错误:Caused by: java.lang.Unsatisfie ...
- Gitlab创建ssh key并添加配置
1 生成ssh key zj改成你自己的邮箱或者名字之类的 ssh-keygen -t rsa -C "zj" 2 找到你生成的ssh key copy 公钥 添加到gitlab ...
- 如何使用ProcessOn制作思维导图
新建一张思维导图之后你是不是有点茫然? 不是因为脑海里没思路,而是不知道怎么把脑海里的思路呈现出来?看到一个孤零零的中心主题和看起来有些简单的页面一时间有点无所适从? 很多人觉得思维导图好看但学起来难 ...
- 5.Shell 流程控制语句
1.流程控制语句 通过if.for.while.case这4种流程控制语句来学习编写难度更大.功能更强的Shell脚本 4.3.1 if条件测试语句: if条件测试语句可以让脚本根据实际情况自动执行相 ...