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

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

生命周期函数的优势

• 每个 Vue 实例在被创建时都要经过一系列的初始化过程。生命周期钩子的函数，给了用户在不同阶段添加自己的代码的机会。例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗。

有哪些生命周期函数？

① beforeCreate

• beforeCreate：组件实例刚被创建，在组件属性计算之前,例如data属性（即不能使用属性、数据和方法）。
• 在这里去做异步的其他以后会用到的任务，比如网络请求，但是我们一般不在这里做网络请求。因为如果我们要挂载vm数据中的data，此时不能取到data数据，所以如果在这里做网络请求 ，只能做与vm对象没有关联的网络请求，比如css、图片的网络请求（即预加载） ，也可以做授权操作、离线数据。
• 一般只执行一次。

② created

• created是我们最常用的钩子
• 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在
• 在这里做网络请求最合适，因为请求数据可以写入vm对象
• 一般只执行一次

③ beforeMount

• 模板编译/挂载到dom完毕之前触发的钩子
• 在beforeMount更新data，不会闪
• 一般会被调多次

④ mounted

• 模板编译/挂载到dom完毕之后触发的钩子
• 常常在mounted更新data，但是会闪屏
• 一般会被调多次

⑤ beforeUpdate

• 组件更新之前，在浏览器第一次刷的时候不会调用该方法。
• 一般会被调多次

⑥ updated

• 组件更新之后
• 可能会被调多次

⑦ beforeDestroy

• 组件销毁之前 （不是dom销毁，是vm销毁）
• 在执行beforeDestroy时，实例还是存在的，即组件里面的所有数据都是可以使用的。
• 在vm对象销毁之前可以做最后的操作，比如停止某段业务
• 只执行一次 。

⑧ destroyed

• 组件销毁已经完成
• 不可以使用组件里面的所有东西。

 <div id="app">
        <input type="text" v-model.lazy="mydata">
        <button @click='fn'>改变值</button>
        <button @click="handleclick">destory</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                mydata:"lee yuki"
            },
            methods:{
                handleclick(){
                    this.$destroy();
                },
                fn(){
                    this.mydata="改变后的值"
                }
            },
            beforeCreate(){
                console.log("我是beforeCreate")
            },
            created(){
                console.log("我是created")
            },
            beforeMount(){
                console.log("我是beforeMout")
            },
            mounted(){
                console.log("我是mounted")
            },
            beforeUpdate(){
                console.log("我是beforeUpdate")
            },
            updated(){
                console.log("我是updated")
            },
            beforeDestroy(){
                console.log('根组件被beforeDestroy')
            } ,
            destroyed(){
                console.log('根组件被destroyed')
            }
        })
    </script>

• 第一次加载页面触发的生命周期函数