VUE 之 生命周期
1、
Vue实例的生命周期分为8个周期
1.1
beforeCreate:在实例创建前
<div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div> <script>
new Vue({
el: "#app",
data: {
name: "maweihua",
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = "Pizza";
}
},
beforeCreate(){
console.group("beforeCreate"); # console.group()将打印的内容放在一个组里
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>
1.2、created 创建之后
<script>
new Vue({
el: "#app",
data: {
name: "maweihua",
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = "Pizza";
}
},
created(){
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>
1.3 beforeMount 挂载之前
<script>
new Vue({
el: "#app",
data: {
name: "maweihua",
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = "Pizza";
}
},
beforeMount(){
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>
1.4 mounted 挂载之后
<script>
new Vue({
el: "#app",
data: {
name: "maweihua",
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = "Pizza";
}
},
mounted(){
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>
1.5 beforeUpdate 更新之前
<script>
new Vue({
el: "#app",
data: {
name: "maweihua",
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = "Pizza";
}
},
beforeUpdate(){
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>
1.6 updated 更新之后
<script>
new Vue({
el: "#app",
data: {
name: "maweihua",
},
methods: {
init: function () {
console.log(this.name);
},
myClick: function () {
this.name = "Pizza";
}
},
updated(){
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>
1.7 beforeDestory 销毁之前
<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("name: ", this.mes);
},
}; 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>
点击按钮才会触发
1.8 destoryed
<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("beforeDestroy");
console.log("el: ", this.$el);
console.log("data: ", this.$data);
console.log("name: ", this.mes);
},
}; 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>
点击按钮才会触发。
由于destoryed是将数据销毁,然后重新加载整的DOM树,所以有了activated,用来将数据存储在缓存中。
1.9 activated
VUE 之 生命周期的更多相关文章
- 8.vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- 如何解释vue的生命周期才能令面试官满意?
当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...
- vue之生命周期
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...
- vue的生命周期的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue笔记-生命周期
生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue 关于生命周期
序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也 ...
- Vue:生命周期
一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- 深入理解Vue的生命周期
谈到Vue的生命周期,相信许多人并不陌生.但大部分人和我一样,只是听过而已,具体用在哪,怎么用,却不知道.我在学习vue一个多礼拜后,感觉现在还停留在初级阶段,对于mounted这个挂载还不是很清楚. ...
- vue笔记 - 生命周期第二次学习与理解
对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...
随机推荐
- Django之model admin自定义后台管理
Admin管理界面是django的杀手级应用.它读取你模式中的元数据,然后提供给你一个强大而且可以使用的界面,网站管理者可以用它立即向网站中添加内容. 比如,数据表如下: from django.db ...
- Luogu【P3609】蹄子剪刀布(DP+滚动数组)
题目链接 (突然高兴 又一次瞬间想出转移方程并一遍A掉!!233333(虽然从二叉苹果树那题开始我就发现我的方程好像跟别人不大一样 (所以这样就可以名正言顺的水题解了 设f[i][j][k]表示考虑F ...
- BZOJ 1861 [Zjoi2006]Book 书架 ——Splay
[题目分析] 模板题目. 首尾两个虚拟结点,十分方便操作. [代码] #include <cstdio> #include <cstring> #include <cma ...
- [POJ1664] 放苹果 (动态规划,组合数学)
题目描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分发(5,1,1和1,1,5是同一种方法) 输入输出格式 输入格式: 第一行是测试数据的数目t(0 <= ...
- leetcode 349 map
只需要用map来标记1,今儿通过map的值来得到重叠的部分 class Solution { public: vector<int> intersection(vector<int& ...
- spring中quartz的使用。【转http://www.cnblogs.com/kay/archive/2007/11/02/947372.html】
注:从spring3到spring4改变 org.springframework.scheduling.quartz.CronTriggerBean org.springframework.sched ...
- 转载 gdb调试程序
转载自csdn,作者haoel,链接http://blog.csdn.net/haoel/article/details/2879 用GDB调试程序 GDB概述———— GDB是GNU开源组织发布的一 ...
- ajax 分页(jquery分页插件pagination) 小例1
<link rel="stylesheet" href="/plugins/jQuery/page/pagination.css"/> <sc ...
- Linux 环境下思源黑体字体与 Java 之间的兼容性问题的解决(补充说明)
在前一篇随笔中,我讲了一下有关 Linux 环境下思源黑体与 Java 之间的兼容性问题,后来经过测试发现,默认安装的思源黑体字体同时包含简体字体和繁体字体,并且其对应的语言编码也是不同的.尝试着把繁 ...
- PAT (Advanced Level) 1087. All Roads Lead to Rome (30)
暴力DFS. #include<cstdio> #include<cstring> #include<cmath> #include<vector> # ...