首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张官方图片:
可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解:
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
来波代码,复制在浏览器中运行,打开console查看就行了:
<script>
var Vcontent = {
template: `
<div>
<span>{
{msg}}</span>
<button @click="changeDate">改变</button>
</div>
`,
data() {
return {
msg: 'helloword'
}
},
methods: {
changeDate() {
this.msg = this.msg + '哈哈哈'
}
},
beforeCreate:function() {
// 组件创建之前
console