<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <!-- beforeCreate阶段可以在此时添加一些loading效果,提高用户体验 --> <!-- created阶段结束loading效果,发送一些网络请求,比如ajax,用来获取数据,也可以在这里添加定时器 --> <!-- 针对前面获取的数据,我们就可以在mounted就可以操作页面的dom元素了 --> <!-- beforeUpdate适合在更新之前访问现有的dom,比如移除已添加的事件监听器 --> <!-- updated,页面更新后,如果想对数据做统一处理,可以在这里完成 --> <!-- beforeDestroy适合做销毁前的准备工作,比如说在这里清除定时器 --> <div id="app"> <h1>{{msg}}:{{count}}</h1> <button @click="add()">按一下加一</button> <button @click="destroy()">按下销毁VM</button> <h1 v-text="count"></h1> </div> <script> // 初始阶段,挂载阶段,更新阶段,销毁阶段 // 一共是四个阶段,八个钩子函数 // 初始阶段beforeCreate创建前,created创建后 // 挂载阶段beforeMount挂载前,mounted挂载后 // 更新阶段beforeUpdate更新前,updated更新后 // 销毁阶段beforeDestroy销毁前,destroyed销毁后 const vm = new Vue({ el : "#app", data : { msg : "Hello", count : 1 }, methods : { add() { // 高版本的VUE会将所有的事件监听器移除,包括自带的事件监听器在内 console.log("add"); this.count++; }, destroy() { this.$destroy(); } }, watch : { count() { // 销毁以后,就不能监视了 console.log("监视一次"); } }, // 整个过程的实现 // new Vue(),VM实例就出现了 // vm对象在这里创建 // 事件对象&生命周期产生了 // 初始阶段,虚拟dom生成 beforeCreate(){ console.log("VUE对象初始化了"); // beforeCreate阶段还没实现数据代理和数据监测 // 所以根本访问不到我们的代理数据 console.log(this.count); }, // 数据代理和数据监测的创建 created(){ console.log("created"); // 这里就可以访问到我们的代理数据了 console.log(this.count); console.log(this.$el); console.log(this.$el instanceof HTMLElement); }, // 初始阶段,el有,template也有,最终编译template模板语句 // el有,template没有,最终编译el模板语句 // el没有的时候,需要手动调用$mount来进行手动挂载,流程才能继续 // 如果el没有,也没有template,最终编译el模板语句 // 结论是流程需要继续,el必须存在 // el和template同时存在,优先选择template,如果没有template,才会选择el // 挂载阶段,真实dom生成 beforeMount(){ console.log(this.$el); console.log(this.$el instanceof HTMLElement); console.log("beforeMount"); }, // 数据代理和检测创建时期和挂载时期在页面展示上没区别,在内存中有区别 // 页面上他们都显示大胡子,因为数据还没有实现挂载的 // 在beforeMount时期操作页面元素不会生效,因为还没有和页面元素产生挂载 // 也就是所谓的没有生成实际的dom树 // 我们现在的所谓修改也就是内存上修改而已 mounted(){ // 挂载是通过创建一个$el并用它取代了页面上的el // mounted处真实的dom也就生成了 console.log(this.$el); console.log(this.$el instanceof HTMLElement); console.log("mounted"); // 此处已经挂载完了,已经覆盖掉我们页面上的元素了 // 所以这里的修改会保留到我们的页面上 // 走到此处,页面的初次渲染就已经做完了,等待和用户的交互了 // 在这前面都没有diff算法,和新旧虚拟dom比较这种说法 }, // 更新阶段,data发生变化重新渲染 beforeUpdate(){ // 数据data已经发生变化,但是仅是内存中的数据变动了 // 实际的dom还没有发生变化 console.log("VUE对象的data更新了"); // 内存的值已经变化了,页面上的实际dom没有变化 }, // 在这里dom会借diff算法比对重新渲染和修补,如何到updated updated() { console.log("updated"); // 到这里的时候,内存的虚拟dom和页面上的实际dom数值一致 }, // 销毁阶段,卸载所有,销毁vm beforeDestroy(){ // 销毁前尽管也有绑定关系,但是监视器在内的已经完全失效了 this.count = 1000; // 监视器没有作用了已经,页面也不会刷新了 // 只有内存中的数据变化了,实际dom没区别 console.log("VM对象销毁了"); console.log(this); }, // VM销毁了以后,VM对象其实还是存在于内存中的 // 只是将VM的监视器,子组件,自定义事件监听器等解绑了(卸载) // 只要不关闭浏览器,VM对象就还在内存里面 // 因此,我们也可以称之为解绑前和解绑后更为精准 destroyed() { console.log("destroyed"); console.log(this); } // 销毁以后指令也失灵了 }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- beforeCreate阶段可以在此时添加一些loading效果,提高用户体验 -->
<!-- created阶段结束loading效果,发送一些网络请求,比如ajax,用来获取数据,也可以在这里添加定时器 -->
<!-- 针对前面获取的数据,我们就可以在mounted就可以操作页面的dom元素了 -->
<!-- beforeUpdate适合在更新之前访问现有的dom,比如移除已添加的事件监听器 -->
<!-- updated,页面更新后,如果想对数据做统一处理,可以在这里完成 -->
<!-- beforeDestroy适合做销毁前的准备工作,比如说在这里清除定时器 -->
<div id="app">
<h1>{{msg}}:{{count}}</h1>
<button @click="add()">按一下加一</button>
<button @click="destroy()">按下销毁VM</button>
<h1 v-text="count"></h1>
</div>
<script>
// 初始阶段,挂载阶段,更新阶段,销毁阶段
// 一共是四个阶段,八个钩子函数
// 初始阶段beforeCreate创建前,created创建后
// 挂载阶段beforeMount挂载前,mounted挂载后
// 更新阶段beforeUpdate更新前,updated更新后
// 销毁阶段beforeDestroy销毁前,destroyed销毁后
const vm = new Vue({
el : "#app",
data : {
msg : "Hello",
count : 1
},
methods : {
add()
{
// 高版本的VUE会将所有的事件监听器移除,包括自带的事件监听器在内
console.log("add");
this.count++;
},
destroy()
{
this.$destroy();
}
},
watch : {
count()
{
// 销毁以后,就不能监视了
console.log("监视一次");
}
},
// 整个过程的实现
// new Vue(),VM实例就出现了
// vm对象在这里创建
// 事件对象&生命周期产生了
// 初始阶段,虚拟dom生成
beforeCreate(){
console.log("VUE对象初始化了");
// beforeCreate阶段还没实现数据代理和数据监测
// 所以根本访问不到我们的代理数据
console.log(this.count);
},
// 数据代理和数据监测的创建
created(){
console.log("created");
// 这里就可以访问到我们的代理数据了
console.log(this.count);
console.log(this.$el);
console.log(this.$el instanceof HTMLElement);
},
// 初始阶段,el有,template也有,最终编译template模板语句
// el有,template没有,最终编译el模板语句
// el没有的时候,需要手动调用$mount来进行手动挂载,流程才能继续
// 如果el没有,也没有template,最终编译el模板语句
// 结论是流程需要继续,el必须存在
// el和template同时存在,优先选择template,如果没有template,才会选择el
// 挂载阶段,真实dom生成
beforeMount(){
console.log(this.$el);
console.log(this.$el instanceof HTMLElement);
console.log("beforeMount");
},
// 数据代理和检测创建时期和挂载时期在页面展示上没区别,在内存中有区别
// 页面上他们都显示大胡子,因为数据还没有实现挂载的
// 在beforeMount时期操作页面元素不会生效,因为还没有和页面元素产生挂载
// 也就是所谓的没有生成实际的dom树
// 我们现在的所谓修改也就是内存上修改而已
mounted(){
// 挂载是通过创建一个$el并用它取代了页面上的el
// mounted处真实的dom也就生成了
console.log(this.$el);
console.log(this.$el instanceof HTMLElement);
console.log("mounted");
// 此处已经挂载完了,已经覆盖掉我们页面上的元素了
// 所以这里的修改会保留到我们的页面上
// 走到此处,页面的初次渲染就已经做完了,等待和用户的交互了
// 在这前面都没有diff算法,和新旧虚拟dom比较这种说法
},
// 更新阶段,data发生变化重新渲染
beforeUpdate(){
// 数据data已经发生变化,但是仅是内存中的数据变动了
// 实际的dom还没有发生变化
console.log("VUE对象的data更新了");
// 内存的值已经变化了,页面上的实际dom没有变化
},
// 在这里dom会借diff算法比对重新渲染和修补,如何到updated
updated()
{
console.log("updated");
// 到这里的时候,内存的虚拟dom和页面上的实际dom数值一致
},
// 销毁阶段,卸载所有,销毁vm
beforeDestroy(){
// 销毁前尽管也有绑定关系,但是监视器在内的已经完全失效了
this.count = 1000;
// 监视器没有作用了已经,页面也不会刷新了
// 只有内存中的数据变化了,实际dom没区别
console.log("VM对象销毁了");
console.log(this);
},
// VM销毁了以后,VM对象其实还是存在于内存中的
// 只是将VM的监视器,子组件,自定义事件监听器等解绑了(卸载)
// 只要不关闭浏览器,VM对象就还在内存里面
// 因此,我们也可以称之为解绑前和解绑后更为精准
destroyed()
{
console.log("destroyed");
console.log(this);
}
// 销毁以后指令也失灵了
});
</script>
</body>
</html>
VUE框架VM对象生命周期总结和对应时期适合执行的操作解析------VUE框架
于 2023-12-03 15:51:52 首次发布
文章详细介绍了Vue.js中不同生命周期阶段(beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed)及其对应的钩子函数,以及这些阶段在数据代理、DOM操作和组件销毁等方面的应用。
摘要由CSDN通过智能技术生成