1.什么是生命周期?
生命周期： 是指一个事物从产生，到最后消亡的整个过程;
vue：vue 实例 组件的生命周期： 实例，从创建到消毁的整个过程；
在不同的生命周期，可以执行不同的操作；
2.beforeupdate 和 updated 的区别是什么？
beforeupdate 数据在内存中更新完成，但是在页面节点中还没有更新的；
updated data中的数据更新后才触发；在内存与页面中都更新了
3,发送ajax 最早在哪个生命周期里？
发送ajax请求最早在created;
4.页面加载的时候，vue生命周期的触发顺序是怎样的呢？
beforecreate created beforemount mounted
5每个生命周期函数的特点是什么？
beforeCreate
创建之前，在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化，不能访问data数据
beforeCreate(){
console.log('beforeCreate',this.msg);
},
created
创建之后，data和methods中的数据已经初始化，此时可以访问data数据
一般在这个函数中发起ajax请求
created(){
console.log('created',this.msg);
},
beforeMount
挂载之前，表示模板已经在内存中编译完成，但尚未把模板渲染到页面中。
此时还没有渲染用数据生成的新dom
beforeMount(){
console.log('beforeMount',this.$el);
},
mounted
表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
此时可以访问dom
mounted(){
console.log('mounted',this.$el);
},
beforeUpdate
当且仅当data被修改时才触发这个生命周期函数，但此时仅仅是数据被修改，页面
beforeUpdate(){
console.log('beforeUpdate',this.msg);
console.log('beforeUpdate',this.$el.innerHTML);
},还未更新。
updated
会根据新数据生成最新的内存DOM树，重新渲染到真实的页面中去，
此时的data数据和页面已完成同步
updated(){
console.log('updated',this.$el.innerHTML);
},
beforeDestroy
当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段。
当执行beforeDestory的时候，实例身上所有的data和所有的methods，以及过滤器、指令...都处于可用状态，此时还没有真正执行销毁过程。
beforeDestroy(){
console.log('beforeDestroy');
},
destroyed
当执行到destoryed函数的时候，组件已经被全部销毁了，data与methods均不可用。
更改data数据，页面不会更新
destroyed(){
console.log('destroyed');
}
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="lib/vue.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 160px;
background-color: yellow;
text-align: center;
font: 700 100px/160px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div id="box" ref="box" style="border:1px red solid;width:100px;height: 100px;">
aaa{{n}}
</div>
<button @click="updaten">更新n</button>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
</div>
<script type="text/javascript">
//生命周期： 是指一个事物从产生，到最后消亡的整个过程；
//树：种子发芽，小苗， 大苗 ，小树，大树， 枯萎；
//人： 出生，婴儿，小儿童，大儿，少年，青年，壮年，老年，去世
//vue：vue 实例 组件的生命周期： 实例，从创建到消毁的整个过程；
//在不同的生命周期，可以执行不同的操作；
//生命周期函数，生命周期钩子
//新打开组件，页面，执行哪些函数：be
let app = new Vue({
el:"#app",
data:{
n:1,
k:2
},
methods:{
updaten(){
this.n = "2"
}
},
beforeCreate(){
//实例产生之前调用这个方法； 此时这个实例在内存中还没有产生
//此时，data,el,methods方法都无效；
console.log("A实例产生之前调用");
// console.log(this.n);
// this.updaten();
//获取节点在MOUNTED中获取不能beforecatea;
// let box = this.$refs.box;
// console.log(box);
// box.style.backgroundColor="pink";
},
created(){
// 指这个实例已经在内存中产生；但是还没有放到页面中；
console.log("B实例已经创建完毕，但是没有挂载到 页面");
//可以操作DOM nextick(); 发送ajax请求；
//可以拿到数据；拿不到el;
console.log(this.$el);
console.log(this.n);
// this.updaten();
},
beforeMount(){
//即将从内存中挂到页面中
console.log("C挂载前");
console.log(this.$el);
},
mounted(){
// 内存中的实例已经彻底挂到页面中；
console.log("D挂载到父节点");
//可以操作DOM 发送ajax请求；
var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span");
for(var i=0;i<liArr.length;i++){
//绑定索引值（新增一个自定义属性：index属性）
liArr[i].index = i;
liArr[i].onmouseover = function () {
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //【重要代码】
}
}
},
beforeUpdate(){
//beforeupdate updated 区别；
//数据在内存中更新完成，但是在页面节点中还没有更新的；
console.log("data更新前");
console.log(document.getElementById('box').innerHTML); // 1
},
updated(){
//data中的数据更新后才触发；
//在内存与页面中都更新了；
console.log("更新后");
console.log(document.getElementById('box').innerHTML); //2
}
//watch
})
</script>
<script type="text/javascript">
//什么是生命周期；
//生命周期有哪些： beforecreate created beforemount mounted beforeupadate updated;
//每个周期的特点：
//发送ajax请求最早在created;
//页面组件，重新加载时会触发哪些生命周期；
</script>
</body>
</html>
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
