vue中钩子函数

青旅半醒 2023-07-10 05:28 8阅读 0赞

简单来说钩子函数是**在系统消息触发时被系统调用的函数**。不能自己触发。

## vue的生命周期函数都是钩子函数 ##

**创建**：异步请求适宜在created()调用

beforeCreate() {
        console.log('创建之前')
        console.log('this',this)
        console.log('data',this.num)            //没有初始化数据
        console.log('dom',this.$refs['p'])      //没有真实dom
      },
      created(){
        // 可以网络请求
        console.log('创建结束')
        console.log('this',this)
        console.log('data',this.num)            //有数据
        this.num=5                              //可以修改数据 在这里修改数据不会触发运行中的更新的生命周期
        console.log('dom',this.$refs['p'])      //没有真实dom
      }

**挂载**：mounted()可做dom节点操作了

beforeMount() {
        // 挂载之前和created类似--有数据 可以改数据 没有dom 可做网络请求
        console.log('挂载之前')
        console.log('this',this)
        console.log('data',this.num)
        console.log('dom',this.$refs['p'])
      },
      mounted(){
        //挂载结束 可做初始化的操作 --轮播图组件swiper
        console.log('挂载结束')
        console.log('this',this)
        console.log('data',this.num)            //有数据，可以修改数据
        this.num=5
        console.log('dom',this.$refs['p'])      //有dom，可以修改dom
      }

**更新**：对数据做统一处理适宜在updated()

beforeUpdate() {
        // 挂载之后数据更新的时候触发，挂载之前数据跟新不会触发
        console.log('更新之前')  
        console.log('this',this)
        console.log('data',this.num)                //数据 是更新之后的
        console.log('dom', this.$refs.p.innerHTML)  //dom是更新之前的
      },
      updated() {
        // 数据与dom都跟新完了触发
        // 注意做数据的修改操作 可能引起死循环
        console.log('更新之前')  
        this.num=Math.random()
        console.log('this',this)
        console.log('data',this.num)                //数据 是更新之后的
        console.log('dom', this.$refs.p.innerHTML)  //dom是更新之后的
      },

**销毁**：用于清除一些全局监听，定时器…

beforeDestroy() {
        // 有数据 有this 也都没用 有dom
        console.log('销毁之前')
        console.log(this)
        console.log(this.num)
        console.log(this.$refs['p'].innerHTML)
      },
      destroyed() {
        // 有数据  有this 但是没有用 没有dom
         console.log('销毁之后') 
         console.log(this)
         console.log(this.num)
         console.log(this.$refs['p'].innerHTML)
      }

## vue中自定义指令的的五个钩子函数： ##

**inserted**: 被绑定元素插入已存在父节点时调用（父节点可不在于document 中）。  
**update**:被绑定元素所在的模板更新时调用，（不论绑定值变化与否）  
**unbind**: 指令与元素解除绑定时调用。只执行一次。  
**bind**:指令初次绑定到元素时调用，可定义一个在绑定时执行一次的初始化动作。  
**componentUpdated**: 被绑定元素所在模块完成一次更新周期时调用。