【Vue实例生命周期】
"有时候，我们需要在实例创建过程中进行一些初始化的工作，以帮助我们完成项目中更复杂更丰富的需求开发，针对这样的需求，Vu e提供给我们一系列的钩子函数。
本文将详细介绍Vue实例在创建和销毁的过程中我们可以使用的钩子函数。
这是官方文档提供的Vue实例生命周期图，我们结合这张图来进行钩子函数的解析。
@
实例创建之前执行——beforeCreate
除标签外，所有的vue需要的数据(data)、事件(methods)、标签(el)都不存在.
<body>
<div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'zyk',
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = 'ZYK';
}
},
// 实例创建之前执行
beforeCreate() {
console.group('beforeCreate');
console.log('el:', this.$el);
console.log('data:', this.$data);
console.log('name:', this.name);
console.log('init:', this.init);
console.log('innerHTML:', document.getElementById('app').innerHTML);
},
});
</script>
</body>
打印结果如下图：
实例创建之后执行——created
数据和事件被解析到，标签(el)还未被解析.
<body>
<div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'zyk',
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = 'ZYK';
}
},
// 实例创建之后执行
created() {
console.group('created');
console.log('el:', this.$el);
console.log('data:', this.$data);
console.log('name:', this.name);
console.log('init:', this.init);
console.log('innerHTML:', document.getElementById('app').innerHTML);
},
});
</script>
</body>
打印结果如下图：
挂载之前执行——beforeMount
数据、事件、标签都已被解析，但数据还未被渲染.
<body>
<div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'zyk',
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = 'ZYK';
}
},
// 挂载之前执行
beforeMount() {
console.group('beforeMount',);
console.log('el:', this.$el);
console.log('data:', this.$data);
console.log('name:', this.name);
console.log('init:', this.init);
console.log('myClick:', this.myClick);
console.log('innerHTML:', document.getElementById('app').innerHTML);
},
});
</script>
</body>
打印结果如下图：
挂载之后执行——mounted
开始渲染数据，开始监听事件.
<body>
<div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'zyk',
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = 'ZYK';
}
},
// 挂载之后执行
mounted() {
console.group('mounted',);
console.log('el:', this.$el);
console.log('data:', this.$data);
console.log('name:', this.name);
console.log('init:', this.init);
console.log('myClick:', this.myClick);
console.log('innerHTML:', document.getElementById('app').innerHTML);
},
});
</script>
</body>
打印结果如下图：
数据更新之前执行——beforeUpdate
数据己被修改在虚拟DOM，但还未被渲染到页面上
数据更新时(之前)被调用，发生在虚拟DOM打补丁之前.
适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器.
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行.
<body>
<div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'zyk',
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = 'ZYK';
}
},
// 数据更新之前执行
beforeUpdate() {
console.group('beforeUpdate',);
console.log('el:', this.$el);
console.log('data:', this.$data);
console.log('name:', this.name);
console.log('init:', this.init);
console.log('myClick:', this.myClick);
console.log('innerHTML:', document.getElementById('app').innerHTML);
},
});
</script>
</body>
打印结果如下图：
数据更新之后执行——updated
将虚拟DOM中的数据应用到页面上，此时真实的DOM数据被修改了.
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子.
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之.
<body>
<div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'zyk',
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = 'ZYK';
}
},
// 数据更新之后执行
updated() {
console.group('updated',);
console.log('el:', this.$el);
console.log('data:', this.$data);
console.log('name:', this.name);
console.log('init:', this.init);
console.log('myClick:', this.myClick);
console.log('innerHTML:', document.getElementById('app').innerHTML);
},
});
</script>
</body>
打印结果如下图：
实例销毁之前执行——beforeDestroy
所有的数据都存在.
实例销毁之前调用，在这一步，实例仍然完全可用.
频繁地创建和销毁组件对性能的影响很大，因此可使用activated和deactivated（将在下面介绍这两个钩子）.
该钩子在服务端渲染期间不被调用.
<body>
<div id="app"></div>
<script>
let Laside = {
template: `
<div>
<h1>{{ mes }}</h1>
</div>
`,
data() {
return {
mes: 'Hello Vue!',
};
},
methods: {
changeData: function () {
this.mes = 'Pizza is here!';
},
},
// 实例销毁之前执行
beforeDestroy() {
console.log("beforeDestroy");
console.log("el: ", this.$el);
console.log("data: ", this.$data);
console.log("mes: ", this.mes);
console.log("changeData: ", this.changeData);
},
};
let App = {
template: `
<div>
<Laside v-if="isShow"></Laside>
<button @click="showHide">创建消除组件</button>
</div>
`,
// 判断是否有嵌套的子组件
components: {
'Laside': Laside,
},
methods: {
showHide: function () {
this.isShow = !this.isShow;
}
},
data() {
return {
isShow: true,
};
},
};
new Vue({
el: '#app',
template: `<App/>`,
components: {
App,
},
});
</script>
</body>
打印结果如下图：
实例销毁之后执行——destroyed
所有的数据都存在（虚拟DOM找的）.
Vue实例销毁后调用，调用后，Vue实例指示的所有东西都将会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁.
<body>
<div id="app"></div>
<script>
let Laside = {
template: `
<div>
<h1>{{ mes }}</h1>
</div>
`,
data() {
return {
mes: 'Hello Vue!',
};
},
methods: {
changeData: function () {
this.mes = 'Pizza is here!';
},
},
// 实例销毁之后执行
destroyed() {
console.log("destroyed");
console.log("el: ", this.$el);
console.log("data: ", this.$data);
console.log("mes: ", this.mes);
console.log("changeData: ", this.changeData);
},
};
let App = {
template: `
<div>
<Laside v-if="isShow"></Laside>
<button @click="showHide">创建消除组件</button>
</div>
`,
// 判断是否有嵌套的子组件
components: {
'Laside': Laside,
},
methods: {
showHide: function () {
this.isShow = !this.isShow;
}
},
data() {
return {
isShow: true,
};
},
};
new Vue({
el: '#app',
template: `<App/>`,
components: {
App,
},
});
</script>
</body>
打印结果如下图：
keep-alive组件激活时执行——activated
Vue提供的用来缓存被消除的标签，keep-alive组件激活时调用.
使用activated和deactivated可分别取代取代beforeDestroy和destroyed的执行.
< keep-alive >包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们.
<body>
<div id="app"></div>
<script>
let Laside = {
template: `
<div>
<h1>{{ mes }}</h1>
</div>
`,
data() {
return {
mes: 'Hello Vue!',
};
},
methods: {
changeData: function () {
this.mes = 'Pizza is here!';
},
},
// keep-alive组件激活后不会被调用
beforeDestroy() {
console.log("destroyed");
console.log("el: ", this.$el);
console.log("data: ", this.$data);
console.log("mes: ", this.mes);
console.log("changeData: ", this.changeData);
},
// keep-alive组件激活时执行
activated() {
console.log("destroyed");
console.log("el: ", this.$el);
console.log("data: ", this.$data);
console.log("mes: ", this.mes);
console.log("changeData: ", this.changeData);
},
};
let App = {
// 激活keep-alive组件
template: `
<div>
<keep-alive>
<Laside v-if="isShow"></Laside>
</keep-alive>
<button @click="showHide">创建消除组件</button>
</div>
`,
// 判断有没有嵌套的子组件
components: {
'Laside': Laside,
},
methods: {
showHide: function () {
this.isShow = !this.isShow;
},
},
data() {
return {
isShow: true,
};
},
};
new Vue({
el: '#app',
template: `<App/>`,
components: {
App,
},
});
</script>
</body>
打印结果如下图：
keep-alive组件停用时执行——deactivated
<body>
<div id="app"></div>
<script>
let Laside = {
template: `
<div>
<h1>{{ mes }}</h1>
</div>
`,
data() {
return {
mes: 'Hello Vue!',
};
},
methods: {
changeData: function () {
this.mes = 'Pizza is here!';
},
},
// keep-alive组件停用时执行
deactivated() {
console.log("destroyed");
console.log("el: ", this.$el);
console.log("data: ", this.$data);
console.log("mes: ", this.mes);
console.log("changeData: ", this.changeData);
},
};
let App = {
// 激活keep-alive组件
template: `
<div>
<keep-alive>
<Laside v-if="isShow"></Laside>
</keep-alive>
<button @click="showHide">创建消除组件</button>
</div>
`,
// 判断有没有嵌套的子组件
components: {
'Laside': Laside,
},
methods: {
showHide: function () {
this.isShow = !this.isShow;
},
},
data() {
return {
isShow: true,
};
},
};
new Vue({
el: '#app',
template: `<App/>`,
components: {
App,
},
});
</script>
</body>
打印结果如下图：
"
【Vue实例生命周期】的更多相关文章
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- Vue实例生命周期+vueRoter
Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el ...
- vue实例生命周期
实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...
- vue实例生命周期详解
每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实 ...
- vue 实例生命周期
compile template into render function 编译模板渲染方法 compile el’s ouoterHtml as template 将el的outerHTML当做模板 ...
- vue入门：（底层渲染实现render函数、实例生命周期）
vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法 ...
- Vue：生命周期
一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...
- 前端（二十）—— vue介绍：引用vue、vue实例、实例生命周期钩子
vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...
- 8.vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
随机推荐
- WSO2 ESB XML定义语法（2）
5.Proxy Service 配置 <proxy>元素用于定义Synapse代理服务. 通过基础Axis2引擎在指定的传输上创建和公开代理服务,根据标准的Axis2约定(即基于服务名称) ...
- Linux - mysql 异常：登录不上mysql数据库
问题描述 重启虚拟机之后,用命令 mysql -u root -p 登录不上 mysql 数据库,页面显示: 但是,用命令 service mysqld status 可以查看状态 解决方案 1.查看 ...
- C# asp.net 连接Mysql 数据库
首先添加 引用: using System.Data;using MySql.Data.MySqlClient; 代码: 这里只写了 后台代码 Mysql 连接和sql 连接代码几乎一样 只要把 My ...
- date-fns时间库的基本使用
在react中使用date-fns: import sub_days from 'date-fns/sub_days'; import start_of_week from 'date-fns/sta ...
- linux中mysql安装（配图）
环境: 1.操作系统:CentOS release 6.8 (Final) 2.安装版本: mysql-5.6.31-linux-glibc2.5-x86_64.tar.gz 3.下载地址:http: ...
- 压力测试：响应时间、并发、RPS的关系
需要对服务器接口做压力测试前,要理解的一些术语含义:响应时间.并发.RPS 并发: 什么叫并发?并发不是我们理解的在loadrunner场景中设置并发数,而是正在系统中执行操作或者在系统的队列中排队的 ...
- s 贪心
区间问题: 区间选点问题 右端点排序,now标记点. 数轴上有N个闭区间[Ai, Bi].取尽量少的点,使得每个区间内都至少有一个点(不同区间内含的点可以是同一个). 输入 第1行:一个整数N(1 ...
- 数据库ETL同步 cdc开启，Git同步url添加用户名密码
添加双主键 alter table TChargeRecordMainNew add constraint pk_name primary key (任务编码,序号) ---------------- ...
- [NOI2015] 品酒大会 - 后缀数组,并查集,STL,启发式合并
[NOI2015] 品酒大会 Description 对于每一个 \(i \in [0,n)\) 求有多少对后缀满足 LCP 长度 \(\le i\) ,并求满足条件的两个后缀权值乘积的最大值. So ...
- PP:Classification of Time-Series Images Using Deep Convolutional Neural Networks
The 10th international conference on machine vision; C类 Methodology: 非主流方法 2 stages: 1. convert time ...