Vue基础进阶 之 Vue生命周期与钩子函数
Vue生命周期
Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期；
Vue生命周期示意图：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示；
Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，我们可以通过这些方法在Vue实例创 建、挂载、数据更新、销毁等阶段做一些事情；
Vue的生命周期钩子函数
钩子函数的详情介绍网址：https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子
beforeCreate与created钩子函数进行对数据的观测
示例效果：
该两个钩子函数的vue代码：
<script>
window.onload= () =>{
new Vue({
el:'div',
data:{
msg:'欢迎来到perfect*博客园！！！！'
},
beforeCreate(){
alert("1 beforCreate 创建Vue实例，但是未进行数据的观测"+this.msg);
},
created(){
alert("2 created创建Vue实例，进行数据的观测了"+this.msg);
}
})
}
</script>
html:
<div >
<input type="text" v-model="msg" /><br />
<h1>{{msg}}</h1> </div>
beforeMount与mounted钩子函数进行对数据的挂载：
挂载实例的钩子函数代码：
beforeMount(){
alert("3 beforeMount挂载vue实例前"+this.msg+this.$refs.msgText.innerText);
},
mounted(){
alert("4 mounted已经挂载vue实例了"+this.msg+this.$refs.msgText.innerText);
}
HTML：
<h1 ref='msgText'>{{msg}}</h1>
beforeUpdate与updated钩子函数：
数据更新前与更新后的钩子函数：
beforeUpdate(){
alert("5 beforeUpdate数据更新前"+this.msg+this.$refs.msgText.innerText);
},
updated(){
alert("6 updated数据更新后"+this.msg+this.$refs.msgText.innerText);
}
html:
<input type="text" v-model="msg" /><br />
<h1 ref='msgText'>{{msg}}</h1>
beforeDestroy与destroyed的钩子函数：
由效果图可知当点击销毁后，数据就不能再进行观测了，由此观测不到数据的修改
销毁前与销毁后的钩子函数代码：
beforeDestroy(){
alert("7 beforeDestroy 销毁前");
},
destroyed(){
alert("8 destroyed 销毁后");
},
methods:{
onDestroy(){
this.$destroy();
}
html:
<input type="text" v-model="msg" /><br />
<h1 ref='msgText'>{{msg}}</h1>
<button @click="onDestroy">销毁</button>
以上所有钩子函数组成的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue生命周期钩子函数</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script> window.onload= () =>{
new Vue({
el:'div',
data:{
msg:'欢迎来到perfect*博客园！！！！' }, beforeCreate(){
alert("1 beforCreate 创建Vue实例，但是未进行数据的观测"+this.msg); }, created(){
alert("2 created创建Vue实例，进行数据的观测了"+this.msg); }, beforeMount(){
alert("3 beforeMount挂载vue实例前"+this.msg+this.$refs.msgText.innerText); },
mounted(){
alert("4 mounted已经挂载vue实例了"+this.msg+this.$refs.msgText.innerText); },
beforeUpdate(){
alert("5 beforeUpdate数据更新前"+this.msg+this.$refs.msgText.innerText); },
updated(){
alert("6 updated数据更新后"+this.msg+this.$refs.msgText.innerText); },
beforeDestroy(){
alert("7 beforeDestroy 销毁前");
},
destroyed(){
alert("8 destroyed 销毁后"); },
methods:{
onDestroy(){ this.$destroy();
} } }) }
</script>
</head>
<body>
<div >
<input type="text" v-model="msg" /><br />
<!--<h1>{{msg}}</h1>-->
<h1 ref='msgText'>{{msg}}</h1>
<button @click="onDestroy">销毁</button> </div>
</body>
</html>
钩子函数
Vue基础进阶 之 Vue生命周期与钩子函数的更多相关文章
- [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)
一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- vue学习（五）生命周期 的钩子函数
生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivate ...
- Vue基础进阶 之 实例方法--生命周期
在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- vue生命周期、钩子函数
https://segmentfault.com/a/1190000011381906 详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...
- vue教程2-01 vue生命周期、钩子函数
vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue（3）- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
随机推荐
- Eclipse + Maven 安装配置
1. 下载 http://maven.apache.org/download.cgi 2. 解压 3. 配置环境变量 MAVEN_HOME = D:\Software\apache-maven-3.5 ...
- Linux学习笔记：常用100条命令（三）
linux常用命令 1.查看当前yum源 yum list 2.查看电脑以及操作系统的相关信息 uname -a 3.查看当前版本信息 cat /proc/version 4.查看发行版本信息 cat ...
- lldb使用
常用 si,ni ,ex, mem,di,reg,b,c,x 以下内容是lldb帮助文档中内容: apropos -- List debugger commands related ...
- cocos2d-x 错误异常抛出捕获和崩溃拦截
Error对象 一旦代码解析或运行时发生错误,JavaScript引擎就会自动产生并抛出一个Error对象的实例,然后整个程序就中断在发生错误的地方. Error对象的实例有三个最基本的属性: nam ...
- cocos2dx JS 层(Layer)的生命周期
场景的生命周期: 一般情况下一个场景只需要一个层,需要创建自己的层类.一些主要的游戏逻辑代码都是写在层中的,场景的生命周期是通过层的生命周期反映出来的,通过重写层的生命周期函数,可以处理场景不同声明周 ...
- 12月centos单词
---恢复内容开始--- UNreachable:adj.(network server unreachable) 不能达到的; 及不到的; 取不到的; 不能得到的; rsync: rsync [re ...
- gulp打包公共部分
安装gulp cnpm install gulp -g 输入gulp -v看到版本号说明安装成功了 安装gulp-file-include:npm install gulp-file-include ...
- 【转】robot framework + python实现http接口自动化测试框架
前言 下周即将展开一个http接口测试的需求,刚刚完成的java类接口测试工作中,由于之前犯懒,没有提前搭建好自动化回归测试框架,以至于后期rd每修改一个bug,经常导致之前没有问题的case又产生了 ...
- css中块级元素、内联元素（行内元素、内嵌元素）
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- QWidget 的 close 与 Qt::WA_DeleteOnClose
[1]close 与 Qt::WA_DeleteOnClose简介 1.1 Qt源码 /*! Closes this widget. Returns \c true if the widget was ...