<!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>
<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框架
精选 原创
©著作权归作者所有:来自51CTO博客作者旧约Alatus的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
VUE框架CLI组件化组件解绑事件实现------VUE框架
VUE框架CLI组件化组件解绑事件实现------VUE框架
User 自定义事件 回调函数 -
VUE框架手写实现VUE数据代理机制------VUE框架
VUE框架手写实现VUE数据代理机制------VUE框架
html javascript Vue