最后
面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
2.2,mounted
在经过这个 beforeMount 的阶段之后,Vue会将el中的数据存放在 $el 上,类似于做一个副本,此时会将内存中的虚拟DOM转化为真实DOM存在页面中。
在将真实的DOM插入页面之后,Vue就会开始调用这个 mounted 挂载的这个函数了。因为页面中已经呈现的是经过Vue编译的DOM了,因此在这个函数中对DOM的操作均有效,到此为止,初始化阶段正式结束。
<div id="root">
<h1>当前的值n为:{{n}}</h1>
<button @click = "add">点我+1</button>
</div>
new Vue({
el:'#root',
data:{n:1},
methods:{add(){ this.n++ }},
...
mounted(){
console.log('mounted');
console.log(this);
//操作DOM元素
document.querySelector('h1').innerText = 'zhs'
}
})
通过上面的代码以及下面的结果可知,在挂载阶段DOM元素已经是全部经过Vue解析的,因此展示在页面的值都是解析后的值,并且在这个阶段也可以有效的操作DOM元素。
在这个挂载函数中,一般会进行这些操作:开启定时器,发送网络请求,订阅消息,绑定自定义事件等操作
3,更新流程
在挂载流程解释之后,接下来会进入更新流程,更新流程主要分为 beforeUpdate 和 updated 两个流程。
3.1,beforeUpdate
就是说只要data中的数据发生改变,那么就会触发这个钩子函数,但是在这个阶段中,页面上渲染的数据和被改变的数据没有保持同步,就是页面还没有来得及展示被修改的值。
<div id="root">
<h1 id='h1'>当前的值n为:{{n}}</h1>
<button @click = "add">点我+1</button>
</div>
new Vue({
el:'#root',
data:{n:1},
methods:{add(){ this.n++ }},
...
beforeUpdate(){
//现在被修改的值
console.log("vue实例数据是:" + this.n);
debugger;
}
})
通过下面的代码和下面的结果可知,vue实例中的数据和页面的数据是不一致的。
3.2,updated
在这个beforeUpdate结束之后,会经过一个 Virtual DOM re-render and patch 阶段,在这个阶段,就会生成新的虚拟DOM,随后通过diff算法,实现新旧的虚拟DOM的比较,最终完成页面的更新。
此时这个数据是新的,页面也是最新的,并且数据和页面是保持一致的。
<div id="root">
<h1 id='h1'>当前的值n为:{{n}}</h1>
<button @click = "add">点我+1</button>
</div>
new Vue({
el:'#root',
data:{n:1},
methods:{add(){ this.n++ }},
...
updated(){
console.log(updated);
//现在被修改的值
console.log("vue实例数据是:" + this.n);
debugger;
}
})
通过上面的代码和下面的结果可知,数据和页面是同步的
4,销毁流程
接下来就进入最后一个流程,销毁流程,销毁用官网的话来说:清理它与其他实例的链接,解绑他的全部指令以及时间监听器。主要是由两个部分组成,分别是 beforeDestry 和 destroyed
4.1,beforeDestry
销毁需要调用这个 this.$destroy() 方法来实现。在销毁 beforeDestry 的这个函数中,销毁的实例中的所有的data,methods还有指令等等都是处于可用状态,但是不能对实例中的具体的数据和方法进行一个操作。
<div id="root">
<button @click = "bey">点我销毁</button>
</div>
new Vue({
el:'#root',
data:{n:1},
methods:{
bey(){this.$destroy()}
},
...
beforeDestroy(){
console.log('beforeDestry');
}
})
4.2,destroyed
在到了这个最终的销毁方法之后,vue实例算是彻底的被销毁了,但是页面上的数据是还在的,但是不能操作上面的数据了。
...
destroyed(){
console.log('destroyed');
}
总代码如下
<!-- 一个容器,可以用于接收vue实力传来的数据,然后展示 -->
<div id="root">
<h1 id="h1">当前的值n为:{{n}}</h1>
<button @click = "add">点我+1</button>
<button @click = "bey">点我销毁</button>
</div>
<script type="text/javascript" >
Vue.config.productionTip = false, //阻止vue启动时提示生产提示
new Vue({
el:'#root',
data:{n:1},
methods:{
add(){ this.n++ },
bey(){this.$destroy()}
},
beforeCreate(){
console.log('beforeCreate');
},
created(){
console.log('created');
},
beforeMount(){
console.log('beforeMount');
},
mounted(){
console.log('mounted');
},
beforeUpdate(){
console.log('beforeUpdate');
},
updated(){
console.log('updated');
},
beforeDestroy(){
console.log('beforeDestry');
console.log("vue实例准备销毁了");
},
destroyed(){
console.log('destry');
console.log("vue实例已经销毁了");
}
})
</script>
二,vue的生命周期总结
常用的生命周期钩子:
1,mounted:发送ajax、启动定时器、绑定自定义事件、消息订阅等初始化操作
2,beforeDestroy:清除定时器、解绑自定义事件、取消消息订阅等
销毁vue实例之后
1,借助vue开发者工具是看不到任何消息的
2,销毁后自定义事件会失效,但是原生的DOM事件依然有效
3,一般不要在beforeDestory中操作数据,因为该钩子并不会触发更新流程
最后
面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
[外链图片转存中…(img-CAUS3UtK-1715720145587)]
[外链图片转存中…(img-6RITCPlg-1715720145588)]
[外链图片转存中…(img-KeX9O48P-1715720145588)]
[外链图片转存中…(img-WjcfY5OR-1715720145589)]