vue.js【04实例生命周期钩子 实践篇】

beforeCreate

<template>
  <div class="hello">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
	beforeCreate(){
		this.msg = "我是beforeCreate了"
	},
  data () {
    return {
      msg: 'vue.js 生命周期钩子'
    }
  }
}
</script>

运行结果： 

 

created

<template>
  <div class="hello">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
	beforeCreate(){
		this.msg = "我是beforeCreate"
	},
	created(){
		this.msg = "我是created"
	},
  data () {
    return {
      msg: 'vue.js 生命周期钩子'
    }
  }
}
</script>

 运行结果：

 

图解：