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 之 生命周期的更多相关文章

  1. 8.vue的生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  2. 如何解释vue的生命周期才能令面试官满意?

    当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...

  3. vue之生命周期

    vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...

  4. vue的生命周期的理解

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  5. vue笔记-生命周期

    生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. vue 关于生命周期

    序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也 ...

  7. Vue:生命周期

    一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...

  8. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  9. 深入理解Vue的生命周期

    谈到Vue的生命周期,相信许多人并不陌生.但大部分人和我一样,只是听过而已,具体用在哪,怎么用,却不知道.我在学习vue一个多礼拜后,感觉现在还停留在初级阶段,对于mounted这个挂载还不是很清楚. ...

  10. vue笔记 - 生命周期第二次学习与理解

    对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...

随机推荐

  1. Tinkoff Challenge - Elimination Round 开始补题

    A. Oleg and shares time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  2. 【bzoj3231】[Sdoi2008]递归数列 矩阵乘法+快速幂

    题目描述 一个由自然数组成的数列按下式定义: 对于i <= k:ai = bi 对于i > k: ai = c1ai-1 + c2ai-2 + ... + ckai-k 其中bj和 cj  ...

  3. Jackson转换JSON例子

    Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json.xml转换成Java对象. 前面有介绍过json-lib这个框架,在线博文:http://www.cnblo ...

  4. Gauss 高斯消元

    高斯消元…… (裸的暴力) 如果你有一个n元的方程组你会怎么办? Ans:直接用初中的解方程组的方法呀! 没错,直接暴力加减消元.那什么是“高斯消元”?说白了,就是普通的加减消元罢了. 本人再考场上打 ...

  5. 洛谷 [P2964] 硬币的游戏

    博弈论+dp 依旧是博弈论的壳子,但问的是最大值,所以要dp 设 dp[i][j] 表示该取 i 号硬币,上一次取了 j 个的先手能取的最大值, 因为每次从小到大枚举复杂度太高,所以我们要从 dp[i ...

  6. ci框架——数据库(增删改查)

    1:配置数据库(application/config/database.php)修改 $db['default'] = array( 'dsn' => '', 'hostname' => ...

  7. Netty构建游戏服务器(一)--基本概念与原理

    一,Netty是什么 1,Netty是由 JBOSS提供的一个 java开源框架. 2,Netty是JAR包,一般使用ALL-IN-ONE的JAR包就可以开发了. 3,Netty不需要运行在Tomca ...

  8. codevs——1501 二叉树最大宽度和高度

    1501 二叉树最大宽度和高度  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题解       题目描述 Description 给出一个二叉树,输出它的 ...

  9. perf stat 输出解读

    http://zhengheng.me/2015/11/12/perf-stat/ http://zhengheng.me/2015/08/30/perf-tools/

  10. axis2调用WSDL接口

    public static JSONObject sendWsdl(String url,String xmlStr){ JSONObject res=new JSONObject(); try { ...