这里写自定义目录标题
vue生命周期示意图
Vue在实例化的过程中,会调 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed ,些生命周期的钩子,给我们提供了执行自定义逻辑的机会。:
- beforeCreate :
• (更新前)数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象(实例刚刚创建,数据检测和事件初始化都未开始); - created :
• (创建后) 完成数据观测,属性和方法的运算,初始化事件,$属性还没有显示出来(载入前)在挂载开始之前被调用,相关的函数首次被调用。实例已完成以下的配置:编译模板,把里面的数据和模板生成。注意此时还没有挂载到页面上。(载入后)在被新创建的el属性还没有显示出来 - beforeMount:
• (载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。此时打印this.$el 输出的是节点(模板已经编译好了,根据数据和模板已经生成了对应的元素对象,将数据对象关联到了对象的 e l 属 性 , el属性, el属性,el属性是一个HTMLElement对象,也就是这个阶段,vue实例通过原生的createElement等方法来创建这个html片段,准备注入到我们vue实例指明的el属性所对应的挂载点(模板编译完成,有一个虚拟DOM节点) - mounted:
• (载入后)将 ( e l ) . 的 内 容 挂 载 到 了 e l , 相 当 于 我 们 在 j q u e r y 执 行 了 (el).的内容挂载到了el,相当于我们在jquery执行了 (el).的内容挂载到了el,相当于我们在jquery执行了(el).html( e l ) , 生 成 页 面 上 真 正 的 d o m , 上 面 我 们 就 会 发 现 d o m 的 元 素 和 我 们 el),生成页面上真正的dom,上面我们就会发现dom的元素和我们 el),生成页面上真正的dom,上面我们就会发现dom的元素和我们el的元素是一致的。在此之后,我们能够用方法来获取到el元素下的dom对象,并进 行各种操作;(替换或者插入DOM,形成真实的DOM节点) - beforeUpdate(数据改变,但视图还没更新)
• (更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。数据改变,但是还没有渲染的时候 - updated:
• 视图更新完成; - beforeDestroy:
• watchers、组件和事件监听器销毁之前; - destroyed:
• 销毁完成;
代码实例
// An highlighted block
<div id="app">{{a}}</div>
var myVue = new Vue({
el: "#app",
data: {
a: "HelloWord"
},
beforeCreate: function() {
console.log("创建前")
console.log(this.a) //undefined
console.log(this.$el) //undefined
},
created: function() {
console.log("创建之后");
console.log(this.a) //HelloWord
console.log(this.$el) //undefined
},
beforeMount: function() {
console.log("mount之前")
console.log(this.a) //HelloWord
console.log(this.$el) //<div id="app">{{a}}</div>
},
mounted: function() {
console.log("mount之后")
console.log(this.a) //HelloWord
console.log(this.$el) //<div id="app">HelloWord</div>
},
beforeUpdate: function() {
alert("更新前");
console.log(this.a) //Welcome to Vue,页面上显示的还是老的数据
},
updated: function() {
console.log("更新完成");
console.log(this.a) //Welcome to Vue,页面上更新为新数据
},
beforeDestroy: function() {
console.log("销毁前");
console.log(this.a) //Welcome to Vue
console.log(this.$el) //<div id="app">Welcome to Vue</div>
},
destroyed: function() {
console.log("已销毁");
console.log(this.a) //Welcome to Vue
console.log(this.$el) //<div id="app">Welcome to Vue</div>
}
});
setTimeout(function(){
myVue.a = "Welcome to Vue";
},500)
setTimeout(function(){
myVue.$destroy();
},1000)
setTimeout(function(){
alert("再次改变 a 的值")
myVue.a = "HelloWord";
},1500)
注意点:
1、beforeMount实例化之前 data是a的值:HelloWord、DOM节点是虚拟的,就是先占了个坑(即
{{a}}
)
2、$destroy这个方法销毁的是监听器,而不是视图,也就是说之后视图不再受vue控制