释放双眼,带上耳机,听听看~!
beforeMount:渲染前,被vue管理起来的dom在vue实例里还没完成渲染,所以就是还不能访问vue渲染的dom,平时项目中基本用不到,知道有这个是干什么的就行。
mounted:渲染后,数据已在vue实例中渲染完成,也就是可以访问vue渲染的dom了,很常用的一个勾子,一定要记住。
beforeUpdate:更新前,当数据发生改变,但页面还没完成更新,但快要更新时调用,没什么用。
updated:更新后,当数据发生改变,且页面完成了更新后调用,也用的很少。
用法:
它是用在vue实例化里面的,所有的生命同期都是一个函数 ,写到vue里就可以。
new Vue({
el: '#app',
methods: {
},
beforeCreate(){//创建前,还不能访问data与methods},
created(){//创建后,能访问data与methods},
beforeMounte(){//渲染前,被vue管理的dom还没完成在vue实例内的渲染,所以还不能调用dom},
mounted(){//渲染后,被vue管理的dom已完成vue实例内的渲染,所以现在可以调用dom},
beforeUpdate(){//更新前,当数据发生改变,但页面还没完成更新时调用。},
updated(){//更新后,数据发生改变,且完成了页面更新时调用。}
})
功能:
beforeMount:基本没啥用。
mounted:能调用dom,后面用到使用一些第三方插实例化时要调用dom时使用等,这个方法是很常用的
beforeUpdate:基本没啥用。
updated:基本没啥用。实际使用中,因为太多的数据发生改变了,他是在不停的调用的,所以,如果使用它会造成很多性能问题。
注:这里面我们重点需要知道二个生命周期勾子(created与mounted),但是其它勾子我们虽然 基本不怎么用,但需要记住它的功能,这个面试时,基本算是一个必问题了。
来一个demo让大家清晰一下这个过程:
Document* {
padding: 0;
margin: 0;
}
点我啊
new Vue({
el: "#app",
data: {
test: "测试一下"
},
beforeCreate() {
console.log(this.test)
//不能访问data,methods
},
created() {
console.log("created:", this.test)
//能访问data与methods
},
beforeMount() {
console.log("beforeMount:", this.$refs.dom)
//还不能访问dom
},
mounted() {
console.log("mounted:", this.$refs.dom)
},
updated() {
console.log("updated:")
},
beforeUpdate() {
console.log("beforeUpdate:")
},
methods: {
clickEvent() {
this.test = Math.random() * 100
}
}
})
相关文章:
1、beforeCreate:创建前,不能访问data与methods,在当前 vue实例生命周期,只会执行一次;
2、created:创建后,能访问data与methods,但是也还是不能访问dom,在
2020-9-1 19:46:15
0
50
内容投诉
您认为 ID:1172 这篇内容有什么问题?
内容违规:存在色情、暴力、反动等内容
内容侵权:涉嫌侵犯他人版权
恶意广告:有未明确标注的商业推广行为
其他问题
其他问题描述
252fdd93ab
提交