生命周期钩子
1.什么生命周期
2.钩子函数
## 生命周期
生命周期:就是Vue实例从创建到销毁的过程,就是生命周期。
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。
## 钩子函数
同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
vue 官方给出的生命周期图
自己测试生命周期流程
html 代码
<div id="app">
<h1>这是一个标题</h1>
<h2>这是一个h2标题</h2>
<h3>{{msg}}</h3>
<button @click="modify">修改</button>
</div>
js代码
<script>
let vm = new Vue({
// 如果没有el选项,并且没有对实例挂载,则直接退出程序。
// 实例被创建后执行函数。
beforeCreate() { // 是在实例创建之前执行的函数。一般不使用。
debugger;
},
created() {
// 这个函数执行时,data和methods这些变量和方法已经初始化,而且挂载到实例对象上了
debugger;
},
// 在挂载之前执行。
beforeMount() {
debugger;
},
// 挂载完毕,肯定el中vue的语法或者变量被替换掉,而且将重新组合的html放入app中。
mounted() {
debugger;
},
beforeUpdate(){
debugger;
},
updated() {
debugger;
},
//
// beforeDestroy() {
// },
// destroyed() {
// },
// 如果有template会将app中内容替换掉,template只能有一个根元素。
// template: "<div><h1>这是一个模板标题</h1></div>",
// data里面的值最终放到vm上
data: {
a: 1,
msg: "111"
},
computed: {
checkAll(){
return "123";
}
},
methods: {
modify() {
this.msg = "456";
}
}
});
vm.$mount("#app");
// vm.$destroy();
// 生命周期的钩子函数。
// beforeCreate()
// created() : 实例对象创建之后,data和method都初始化, ajax请求。
// beforeMount
// mounted : 挂载,将数据和模板 -> app中了。DOM元素可以使用。操作DOM元素。
// beforeUpdate
// updated
// beforeDestroy
// destroyed
</script>