mysql 钩子函数_Vue入门基础（生命周期钩子函数）

Header.vue

{{title}}

//js 逻辑部分

export default {

name: 'Header',

data() {

return {

title:"多组件嵌套demo"

};

},

//生命周期函数

beforeCreate(){

alert("beforeCreate这时实例还没有被创建，所有你无法知道data，也不能用watch监听");

},

created(){

alert("created这时实例已被创建，可以得到data，调用watch，但是页面还是空白的");

},

beforeMount(){

alert("beforeMount页面挂载前，此时页面依然是空白的。这时render函数首次被调用");

},

mounted(){

alert("mounted页面挂载了，此时可以看到页面的内容。也可以访问到dom");

},

beforeUpdate(){

alert("beforeUpdate数据更新前,也就是虚拟DOM打补丁之前");

},

updated(){

alert("updated数据已经更新完毕");

},

beforeDestroy(){

alert("beforeDestroy页面离开之前被调用，清楚定时器或者第三方的dom结构");

},

destroyed(){

alert("destroyed实例已被完成销毁");

}

}

.Header{

padding:10px;

background-color: green

}

h1{

color: black;

text-align: center

}

结果