释放双眼，带上耳机，听听看~！

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

提交