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的生命周期... 其实我的心中是有那张图的,但是 ...
随机推荐
- Tinkoff Challenge - Elimination Round 开始补题
A. Oleg and shares time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- 【bzoj3231】[Sdoi2008]递归数列 矩阵乘法+快速幂
题目描述 一个由自然数组成的数列按下式定义: 对于i <= k:ai = bi 对于i > k: ai = c1ai-1 + c2ai-2 + ... + ckai-k 其中bj和 cj ...
- Jackson转换JSON例子
Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json.xml转换成Java对象. 前面有介绍过json-lib这个框架,在线博文:http://www.cnblo ...
- Gauss 高斯消元
高斯消元…… (裸的暴力) 如果你有一个n元的方程组你会怎么办? Ans:直接用初中的解方程组的方法呀! 没错,直接暴力加减消元.那什么是“高斯消元”?说白了,就是普通的加减消元罢了. 本人再考场上打 ...
- 洛谷 [P2964] 硬币的游戏
博弈论+dp 依旧是博弈论的壳子,但问的是最大值,所以要dp 设 dp[i][j] 表示该取 i 号硬币,上一次取了 j 个的先手能取的最大值, 因为每次从小到大枚举复杂度太高,所以我们要从 dp[i ...
- ci框架——数据库(增删改查)
1:配置数据库(application/config/database.php)修改 $db['default'] = array( 'dsn' => '', 'hostname' => ...
- Netty构建游戏服务器(一)--基本概念与原理
一,Netty是什么 1,Netty是由 JBOSS提供的一个 java开源框架. 2,Netty是JAR包,一般使用ALL-IN-ONE的JAR包就可以开发了. 3,Netty不需要运行在Tomca ...
- codevs——1501 二叉树最大宽度和高度
1501 二叉树最大宽度和高度 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 题目描述 Description 给出一个二叉树,输出它的 ...
- perf stat 输出解读
http://zhengheng.me/2015/11/12/perf-stat/ http://zhengheng.me/2015/08/30/perf-tools/
- axis2调用WSDL接口
public static JSONObject sendWsdl(String url,String xmlStr){ JSONObject res=new JSONObject(); try { ...