生命周期
- 又名生命周期钩子，生命周期回调函数，生命周期函数
特定时间做特定的事，要把特定的事写特定的函数里
函数中的this指向vm实例或是组件实例对象
lifecycle.png
挂载流
beforecreate函数
- beforecreate函数: 初始化生命周期、事件，数据代理还没开始，vm上的数据都还是null或是undefined。methods里写的方法还没出现在vm上
<div class="root">
<h1>让n加1: {{n}}</h1>
<button @click="add">点击加1</button>
</div>
<script>
Vue.config.devtools = true;
new Vue({
el:'.root',
data:{
n:1
},
methods:{
add(){
this.n++
}
},
beforeCreate(){
console.log('beforeCreate')
console.log(this) //vm,data和methods等等都是没有看到
debugger//卡断点
}
})
</script>
beforeCreate.PNG
- 从图可以看出来，没有data，没有任何方法，都是null，undefined，没有我们写的数据的n，add方法，一切都刚刚开始，都只是在配置属性方法事件等
created函数
- created函数:初始化了数据监测、数据代理，可以访问到了数据，方法等
<div class="root">
<h1>让n加1: {{n}}</h1>
<button @click="add">点击加1</button>
</div>
<script>
Vue.config.devtools = true;
new Vue({
el:'.root',
data:{
n:1
},
methods:{
add(){
this.n++
}
},
beforeCreate(){
console.log('beforeCreate')
console.log(this)
// debugger
},
created(){
console.log('created')
console.log(this)//可以访问到vm数据，方法等,this就是vm
debugger
}
})
</script>
created.PNG
- 黄色部分：可以看到数据data里的n:1，method里的方法add，有数据劫持了data了
el-outerHMTL.PNG
beforeMount函数
- 1.判断是否有el，如果有，再判断是否有template属性
- 要是没有，容器包括外层的HTML
- 要是没有，容器不包括外层的HTML
<div class="root">//容器包括这个一行div
<h1>让n加1: {{n}}</h1>
<button @click="add">点击加1</button>
</div>
- 开始解析模板了，在内存中生产虚拟DOM，但是页面还不能展示效果
- 挂载之前，vue解析出了虚拟DOM，但是页面没有效果，对dom的操作都不生效
<div class="root" :n="n">
<h1>让n加1: {{n}}</h1>
<button @click="add">点击加1</button>
</div>
<script>
Vue.config.devtools = true;
new Vue({
el:'.root',
data:{
n:1
},
methods:{
add(){
this.n++
}
},
beforeCreate(){
console.log('beforeCreate')
console.log(this)
// debugger
},
created(){
console.log('created')
console.log(this)
//debugger
},
beforeMount(){
console.log('beforeMount')
console.log(this)//对DOM操作无效，刷新后就没有了，不生效
debugger
}
})
</script>
- 在console用jQuery修改h1，修改为“最终不会发生改变”，从页面中可以看到确实变成纯文字了
不改变.PNG
- 刷新后还可以看到让n加1: n这段代码，“最终不会发生改变”这段文字消失了，如图
原样.PNG
mounted
- 将虚拟DOM转化为真实DOM，对修改的页面刷新不会重置
对DOM的操作有效，但是不要那么做
这里主要用来进行这些操作：开启定时器，发送网络请求，订阅消息，绑定自定义时间等初始化操作
<div class="root" :n="n">
<h1>让n加1: {{n}}</h1>
<button @click="add">点击加1</button>
</div>
<script>
Vue.config.devtools = true;
new Vue({
el:'.root',
data:{
n:1
},
methods:{
add(){
this.n++
}
},
beforeCreate(){
console.log('beforeCreate')
console.log(this)
// debugger
},
created(){
console.log('created')
console.log(this)
//debugger
},
beforMount(){
console.log('beforeMount')
console.log(this)
// debugger
},
mounted(){
console.log('mounted')
console.log(this)//对DOM操作有效，刷新了也生效
debugger
}
})
</script>
-
没有el，只走到beforMount，模板不会被解析，没有页面
没有el.PNG
没有到mounted.PNG
单独调用$mount这个API
- 解析模板，会走到beforMount这个函数钩子
-
有template的时候，el也要写的，不然template就不能替换el作为容器展示页面
有template.PNG
<div class="root" :n="n">
<!-- <h1>让n加1: {{n}}</h1>
<button @click="add">点击加1</button> -->
</div>
<script>
Vue.config.devtools = true;
const vm = new Vue({
el:'.root',
template:`<div>
<h1>让n加1: {{n}}</h1>
<button @click="add">点击加1</button>
</div>`,//这个配置替换el这个容器，上面的<div class="root" :n="n">变为<div>
data:{
n:1
},
methods:{
add(){
this.n++
}
},
beforeCreate(){
console.log('beforeCreate')
console.log(this)
// debugger
},
created(){
console.log('created')
console.log(this)
//debugger
},
beforMount(){
console.log('beforeMount')
console.log(this)
// debugger
},
mounted(){
console.log('mounted')
console.log(this)
// debugger
}
})
template替换el.PNG
总结
- beforecreate>>> created>>>beforeMount>>>mounted
| beforecreate | created | beforeMount | mounted | |
|---|---|---|---|---|
| 数据 | 无 | 有 | 有 | 有 |
| 方法 | 无 | 有 | 有 | 有 |
| 页面 | 无 | 无 | 有（操作不生效） | 有（操作生效） |
网友评论