【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实例从创建到销毁的过程,就是生命周期 ...
随机推荐
- logistic回归损失函数（非常重要，深入理解）
2.2 logistic回归损失函数(非常重要,深入理解) 上一节当中,为了能够训练logistic回归模型的参数w和b,需要定义一个成本函数 使用logistic回归训练的成本函数 为了让模型通过学 ...
- 编码 - 坑 - win10 下采用 utf-8, 导致 gitbash 中文字体异常, 待解决
blog01 概述 使用 git 中, 遇到一个坑 背景 最近遇到一个 编码转换 问题 本来也 一知半解 要是有人能给我讲讲就好了 环境 win10 1903 git 2.20.1 1. 问题 概述 ...
- 阿里云安装Nginx+vue项目部署
阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...
- 文艺平衡树 lg3391（splay维护区间入门）
splay是支持区间操作的,先做这道题入个门 大多数操作都和普通splay一样,就不多解释了,只解释一下不大一样的操作 #include<bits/stdc++.h> using name ...
- Python记：静夜偶记
- 解决ERROR 1130: Host 'x.x.x.x' is not allowed to connect to this MariaDB server 方法
问题描述 在使用SQLyog操作Linux上的MariaDB时候,会出现如下错误: 解决方法 改表法 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电 ...
- Java-POJ1010-STAMP
说良心话,题目不难,但是题目真的很不好懂,解读一下吧 题意: 读入分两行,第一行为邮票面额(面额相同也视为种类不同)以0结束,第二行为顾客要求的面额,以0结束 要求:每个顾客最多拿4张邮票,并求最优解 ...
- Python入门3 —— 基本数据类型
一:为何变量值(记录的数据)要有类型呢? 1.既然可以记录事物的状态,为什么要分类型呢? 变量值是来记录事物状态的, 而事物的状态是多种多样的, 所以对应着就要应该用不同类型的值去记录这些状态. 二: ...
- php设计模式之单例实例代码
<?php header("Content-type:text/html;charset=utf-8"); /** * 第一步,分别实例化 */ /*class Single ...
- [Linux] Ubuntu18.04 安装之后配置过程
前言 最终还是安装了Ubuntu 虽然一开始想用Deepin 但是死活安装不上,我也很绝望(引导一直找不到 恢复BIOS默认设置也还是不行 所以 有些绝望啊....) 所以 为了让以后的我不再那么 ...