脚本宝典收集整理的这篇文章主要介绍了实例化vue发生了什么?(详解vue生命周期),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~
我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些知识和项目中遇到的坑,有兴趣的同学可以去看看哈(欢迎star)!
const app = new Vue({
el:"#app',
data:{
message:'hello,lifePeriod'
},
methods:{
init(){
console.log('这是一个方法!')
}
}
})
组件实例刚被创建,此时无法访问到 el 属性和 data 属性等..
beforeCreate(){
console.log(`元素:${this.$el}`) //undefined
console.log(`属性message:${this.message}`) //undefined
console.log(`方法init:${this.init}`) //undefined
}
当一个 vue 实例被创建时,他向 Vue 的响应式系统中加入了其 data 对象中能找到的所有属性.
利用 es5 特性 Object.defineProperty,遍历 data 对象下所有属性,将其转化为 getter/setter,以便拦截对象赋值与取值操作,然后利用发布/订阅者模式,从而实现数据的双向绑定!
所以只有当实例被创建时 data 中存在的属性才是响应式的!!!!
将methods 下的所有方法进行声明.
将methods下的方法和data下的属性通过遍历和利用 es5 特性 Object.defineProperty代理到实例下.
this.a = this.$data.a = this.data.a;
this.fn = this.$methods.fn = this.methods.fn;
组件实例创建完成,属性已绑定,但 DOM 还未生成,$el 属性还不存在!
created(){
console.log(`元素:${this.$el}`) //undefined
console.log(`属性message:${this.message}`) //message:hey,vue-lifePeriod!
console.log(`方法init:${this.init}`) //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}
将模板 template 编译成 AST 树、render 函数(new Watch 将模板与数据建立联系)以及 staticRenderFns 函数(通过 diff 算法优化 dom 更新);
运行 render 方法,返回一个 vnode 对象(virtual dom)
模板编译/挂载之前
beforeMount(){
console.log(`元素:${(this.$el)}`)
console.log(this.$el) //<div id="app">{{message}}</div> ,我们发现此时的el还未对数据进行渲染.(虚拟dom的内容)
}
模板编译/挂载之后
mounted(){
console.log(`元素:${(this.$el)}`)
console.log(this.$el) //<div id="app">{{hello,vue-lifePeriod!}}</div> ,已将数据渲染到真实dom
}
组件更新之前
beforeUpdate(){
console.log(this.$el.innerHTML); //hello,vue-lifePeriod ,此时,元素的真实dom内容还未改变.
}
组件更新之后
updated(){
console.log(this.$el.innerHTML); //hey,vue-lifePeriod ,此时,元素的真实dom内容已经改变.
}
组件销毁之前
beforeDestroy(){
console.log(this.$el) //<div id="app">{{hey,vue-lifePeriod!}}</div>
console.log(`属性message:${this.message}`) //message:hey,vue-lifePeriod!
console.log(`方法init:${this.init}`) //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}
组件销毁之后
destroyed(){
console.log(this.$el) //<div id="app">{{hey,vue-lifePeriod!}}</div>
console.log(`属性message:${this.message}`) //message:hey,vue-lifePeriod!
console.log(`方法init:${this.init}`) //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}
实例销毁后虽然 dom 和属性方法都还存在,但改变他们都将不再生效!
app.message = 'hu,vue-lifePeriod';
console.log(app.message) //hey,vue-lifePeriod
以上是脚本宝典为你收集整理的实例化vue发生了什么?(详解vue生命周期)全部内容,希望文章能够帮你解决实例化vue发生了什么?(详解vue生命周期)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。