Vue组件的八个钩子函数

钩子函数: 1、生命周期函数  (c语言中有一类系统回调的函数然后执行业务 叫做钩子)

                2、 在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数

                 3、当前vm实例在创建到销毁的过程中  会去调用的函数

4、设计钩子函数的意义：为了更好的设计程序,让代码更有逻辑 和 可维护性

组件的八个钩子函数：创建前后,挂载前后,更新前后,销毁前后

1、页面首次加载过程中，会依次触发哪些钩子：

beforeCreate，created，beforeMount，mounted

2、created beforeMount mounted  beforeUpdate  updated  beforeDestroy都能访问Vue 实例的 data 属性

基本写法模板：

        new Vue({
            el:"app",
            data: {},
            methods:{},
            filters:{ },
            computed:{},
            directives:{},
    // 钩子函数
            beforeCreate() {},
            created(){},
 
            beforeMount() {},
            mounted(){},
            
            beforeUpdate() {},
            updataed(){},
 
            beforeDestroy() {},
            destroyed() {}                
        })

创建前后

beforeCreate     

              1、这个在项目中干什么?

                    用于预加载一类，不是页面渲染

                    如：

                    预加载图片: 网页中同源加载的优化(同一个页面中img script等等 src属性去请求资源)           预加载工具

                    第三方工具的加载

                    2、能否网络请求?

                    能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的

                    3、能否网络请求数据 然后设置到数据源中?

                    不能设置到数据源中,因为这个钩子中 this还在创建

                    4、这个函数在运行时 vm正在创建中:劫持data,methods 也就是 this对象中还不能访问到数据

 created              

                    1、这个在项目中干什么?

                    请求首屏数据

                    2、能否网络请求?

                    能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的

                    3、能否网络请求数据 然后设置到数据源中

                    可以设置到数据源中,因为这个钩子中 this已经创建完毕了      

                    4、vm对象已经创建完毕了,但是它(vm)还没有挂载到DOM树中， 这个函数可以操作this对象了  但是无法操作DOM

挂载前后

beforeMount

                    1、渲染前的操作

                    2、vm对象已经创建完毕了,在挂载之前触发的钩子

                    3、这个函数可以操作this对象了  但是无法操作DOM

mounted

                     1、vm已经挂载到页面了

                     2、请求首屏数据,请求时页面已经出来了  

注意：this.$el 代表了当前组件的真实DOM,要在mounted之后才有

更新前后

注意：这两个钩子中不能网络请求新数据 去更新数据源会导致死循环

beforeUpdated(并不是数据更新前)

数据源已经更新了 ,页面重新渲染前触发的钩子

updated

页面已经重新渲染了触发的钩子

销毁前后

beforeDestroy

                    1、vm对象销毁之前触发的钩子,this还在  可以做最后的操作

                    2、保存用户的行为配置文件:播放器的进度 等等

destroyed

                    1、 无法操作this

                    2、往往把当前组件中计时器清除了  可以把body的滚动条滚到顶部

销毁对象官方有一个专门的函数 this.$destroy()