Vue----生命周期钩子

生命周期钩子

---

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>