钩子函数: 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()

Vue组件的八个钩子函数

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

创建前后

挂载前后

更新前后

销毁前后

猜你喜欢