【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 数据库基础操作
一 知识储备 MySQL数据库基本操作知识储备 数据库服务器:一台计算机(对内存要求比较高) 数据库管理系统:如mysql,是一个软件 数据库:oldboy_stu,相当于文件夹 表:student, ...
- 数据库之六：聚合函数、group by、having、order by
1.聚合函数: 1.1.COUNT: 计算表中的记录数(行数)可以计算出所有数据行: select count(*) from table_name 可以计算出所有非空行数 select count( ...
- python使用selenium驱动chromium防止浏览器自动升级失效！
python爬虫或者自动化项目中有时会用到selenium自动化测试框架,驱动chrom时由于谷歌浏览器自动升级,会造成驱动和浏览器版本不匹配问题,这时可以用到Chromium,这是谷歌推出用于开发目 ...
- "const char *" 类型的值不能用于初始化 "char *" 类型的实体
用vs2019发现会出现这样的问题 最后发现只要设置一下就解决了,解决方案如下: 右击该项目,选择属性->c/c++->语言->将符合模式改为否就行了... 设置之后程序没有再报错, ...
- Chrome 提标 您的浏览器限制了第三方Cookie...解决方法
最近升级Chrome后会出现 您的浏览器限制了第三方Cookie,这将影响您正常登录,您可以更改浏览器的隐私设置,解除限制后重试. 解决方法: chrome://flags/ 把这句复制到浏览器回车 ...
- Atom 基础使用
当你安装好了 Atom 之后,让我们来认识一下它吧. 当你第一次打开 Atom 的时候,你会看到这样的一个窗口: 这是 Atom 的欢迎屏幕(welcome screen),它展示了一些不错的建议 ...
- CodeForces - 645 C.Enduring Exodus
快乐二分 用前缀和随便搞一下 #include <cstdio> using namespace std; ; int p[N]; ; inline int msum(int a, int ...
- youtube-dl parameters
how to select the format of vidoes from youtube-dl? https://www.jianshu.com/p/611009843919 https://u ...
- python3练习100题——014
这题卡了我一整天,然后还是看答案撸了一遍- 原题链接:http://www.runoob.com/python/python-exercise-example14.html 题目:将一个正整数分解质因 ...
- spring项目中 通过自定义applicationContext工具类获取到applicationContext上下文对象
spring项目在服务器启动的时候 spring容器中就已经被创建好了各种对象,在我们需要使用的时候可以进行调用. 工具类代码如下 import org.springframework.beans.B ...