【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实例从创建到销毁的过程,就是生命周期 ...
随机推荐
- mysql对表中数据根据某一字段去重
要删除重复的记录,就要先查出重复的记录,这个很容易做到 注意:这是查出所有重复记录的第一条记录,需要保留,因此需要添加查询条件,查出所有的重复记录 ) ) 然后 delete from cqssc w ...
- 网络流EK算法模板
\(EK\)算法的思想就是每一次找一条增广路进行增广. 注意几个点: 存图时\(head\)数组要设为\(-1\). 存图的代码是这样的: inline void add(int u, int v, ...
- [CCPC2019 哈尔滨] A. Artful Paintings - 差分约束,最短路
Description 给 \(N\) 个格子区间涂色,有两类限制条件 区间 \([L,R]\) 内至少 \(K\) 个 区间 \([L,R]\) 外至少 \(K\) 个 求最少要涂多少个格子 Sol ...
- C++-标准模板库
C++较之C语言强大的功能之一是,C++编译器自带了大量的可复用代码库,我们称为标准模板库(standard template library),STL.标准模板库是一套常用的数据结构的集合,包括链表 ...
- centos7 walle2瓦力部署教程
项目部署上线,如果是单服务器,那么有多种方式可以部署,比如直接ftp上传,或者直接git去拉取,人工操作也不会花费精力和时间,但是如果采用了集群模式,有多台服务器,那么依靠一台一台的去上传代码,就显得 ...
- ssh: connect to git@gitlab.xxxxx.com:xxxxx.git port 22: Connection refused
公司服务器上的gitlab项目添加了ssh密钥,但是操作时却报错ssh: connect to git@gitlab.xxxxx.com:xxxxx.git port 22: Connection r ...
- 前后端分离构架 与 json ajax简介
前后端分离 传统开发方式 曾几何时,JSP和Servlet为Java带来了无限风光,一时间大红大紫,但随着互联网的不断发展,这样的开发方式逐渐显露其弊端,在移动互联网炙手可热的今天,应用程序对于后台服 ...
- 一、centos7更改网卡名称eth0
异步赠书:10月Python畅销书升级 [线路图]人工智能到底学什么?! 程序员10月书讯 每周荐书(京东篇):618取胜之道.质量保障.技术解密) Centos7更改网卡名称Eth0 标签: Cen ...
- Linux基础命令小结（超全！！）
Linux目录结构 1.bin 存放经常使用的指令比如ll,cp 2.sbin 系统管理员使用的系统管理指令 3.home 存放普通用户的住目录 4.root 系统管理员的用户主目录 5.boot 存 ...
- MySQL学习（七） 索引选择（半原创）
概述 该篇文章主要阐述一个例子(例子来自参考资料,侵删),然后总结今天相关的知识点. 例子 (例子来自参考文章,非原创) 创建表并插入数据,并执行查询 CREATE TABLE `t` ( `id` ...