10-03-vue组件的生命周期

生命周期函数（钩子函数）

vue实例（组件）的生命周期： 从生到死的过程
vue实例在从创建到销毁过程，默认会调用一些函数，这个函数叫生命周期函数，也叫钩子函数
vue链接： vue链接

有template，template做模板，没有就有el 定义的做模板

• beforeCreate: 什么也做不了，data和methods以及页面中的DOM结构都没有初始化。
• created: 可以使用data中的数据，调用methods中的方法，但是DOM元素并没有渲染出来。你想在created中，获取DOM元素，根本得不到。一般情况下，我们会在created这个勾子中，发起ajax请求。
• beforeMound: 在挂载（就是把模板渲染成DOM元素）之前， 也没有什么用，可以获取data中的数据，也可以调用methods中的方法，不能获取dom。
• mounted: DOM元素已经被渲染出来的，就可以获取DOM元素了，当然也可以获取data中的数据，调用methods中方法，我喜欢在mounted钩子中，发起ajax请求
• beforeUpdate: 当data中的数据发生改变，数据改变，视图要重新刷新，就会调用此勾子函数，在这个函数中，拿的数据是新数据，但是，页面中的还是老数据
• updated: 数据改变，虚拟DOM重新渲染，并且打补丁，此时页面中的老数据，会被替换成真实的数据。
  你能在updated这个勾子函数中，更新数据吗？
  答：不能在updated这个勾子中更新数据，会导致死循环。
• beforeDestory: vm实例销毁之前调用
• destroyed: vm实例销毁之后调用 没什么用

<div id="app">
    <h1>{{msg}}</h1>
</div>
<script>
    let vm = new Vue({
        el:"#app",
        beforeCreate(){  // 钩子函数    拿不到data中的数据  调用不了methods中的方法
            console.log("beforeCreate")
        },
        created(){
            console.log("created")
            // console.log(this.msg)
            // this.f();
            // axios.get();
            // 在这里面，不能获取DOM元素
        },
        beforeMount(){   // 没什么用
            console.log("beforeMount")
        },
        mounted(){  // dom元素已被渲染出来了
            console.log("mounted")
        },
        beforeUpdate(){
            console.log("beforeUpdate",this.msg)
        },
        data:{ msg:"hello vue" },
        methods:{ f(){ console.log("f....") } }
    })
</script>

总结：上面的写的钩子函数，是vue框架会在合适的时机，自动地帮我们调用。
我们只需要在合适的钩子，写合适功能了。