vue中hook的两点使用

前言

@hook是什么?用来监听组件生命周期的回调函数。

这和生命周期函数mounted,created,updated有什么区别?
区别1:@hook 会在对应的生命周期函数执行后执行。
区别2:@hook 可以在父组件监听子组件的生命周期运行情况。

1. 在同一个组件中

例如:在mounted中添加一个监听需要在beforeDistroy中移除这个监听,考虑到某些原因你不想再写个beforeDistroy去实现,这时候绿巨人hook就该登场了

mounted () {
  window.addEventListener('online', this.handleOnline)
  this.$once('hook:beforeDestroy', function () {
    window.removeEventListener('online', this.handleOnline)
  })
},

就是你在任意地方用 this.$on/$once('hook:生命周期',callback),就可以监听到生命周期的变化了

2. 在父组件监听子组件的生命周期方法

如果你站在父组件里想在子组件的mounted方法里边做一些事情你会怎么办呢?

//父组件中这样写
<rl-child
  :value="40"
  @mounted="handleChildMounted"
/>
// 子组件中这样写
mounted () {
  this.$emit('mounted')
},

这样确实可以实现,那有没有更好的方式呢?绿巨人说有!!

//父组件中这样写
<rl-child
  :value="40"
  @hook:mounted="handleChildMounted"
/>

handleChildMounted() {
   console.log('父组件监听到 mounted 钩子函数 ...');
},

 
// 子组件中不用写东西
mounted () {
   console.log('子组件触发 mounted 钩子函数 ...');
},
// 以上输出顺序为:
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...  

这样就实现了!是不是还简洁一点呢?

你可能会说,好鸡肋啊,不用你浩克也都能实现啊?这不是脱裤子放屁么?

那如果:你用的是第三方的组件库,你需要在这个组件发生改变时候做一些操作,巧了这个组件还没有实现@change回调,你怎么获取呢,这个时候你转身发现hook真香唉!

3. 想要监听别人封装好的组件(第三方组件)的生命周期,你不可能去第三方子组件的生命周期中写代码。

比如 element-ui 的button组件,在子组件渲染完成后,我想做某些逻辑变更。

<el-button type="primary" @hook:mounted="ButtonRender" :disabled="disabled">{{name}}</el-button>

export default {
  name: 'Parents',
  data: () => {
    return {
      name: 'dx',
      disabled: true
    };
  },
  methods: {
    ButtonRender() {
      this.disabled = false
      this.name = 'yx'
    }
  }
}

vue中使用$.once(‘hook:beforeDestory’,() => {})清理定时器

在vue项目清理定时器,通常有两种方法

方法一:

1、首先在vue实例的data中定义定时器的名称,
2、在方法(methods)或者页面初始化(mounted())的时候使用定时器
3、然后在页面销毁的生命周期函数(beforeDestroy())中销毁定时器
实现代码:

export default{
  data(){
    timer:null  
  },
  mounted(){
	  this.timer = setInterval(()=>{
	  //具体执行内容
	  console.log('1');
	},1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

注: 第一种方法存在的问题是:

1、vue实例中需要有这个定时器的实例,感觉有点多余;
2、创建的定时器代码和销毁定时器的代码没有放在一起,通常很容易忘记去清理这个定时器,不容易维护;*

因此,更推荐第二种方法,使用this.$once(‘hook:beforeDestory’,()=>{});

方法二:直接在需要定时器的方法或者生命周期函数中声明并销毁
实现代码:

export default{
  methods:{
    fun1(){
      const timer = setInterval(()=>{
      	//具体执行代码
        console.log('1');
      },1000);
      this.$once('hook:beforeDestory',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}

所有生命周期执行的顺序

第一次渲染
父beforeCreate
父 hook:beforeCreate
父created
父 hook:created
父beforeMount
父 hook:beforeMount
子beforeCreate
子hook:beforeCreate
子created
子hook:created
子beforeMount
子hook:beforeMount
子mounted
子hook:mounted
父mounted
父 hook:mounted

更新时
父beforeUpdate
父hook:beforeUpdate
子beforeUpdate
子hook:beforeUpdate
子updated
子hook:updated
父updated
父hook:updated

组件摧毁时
父beforeDestroy
父hook:beforeDestroy
子beforeDestroy
子hook:beforeDestroy
子destroyed
子hook:destroyed
父destroyed
父hook:destroyed

以上内容涉及到vue父子组件生命周期执行顺序的知识,但对于@hook:xxx来说,在xxx执行后就会立即执行@hook:xxx
 

Logo

前往低代码交流专区

更多推荐