脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2 @hook妙用

vue2中@hook的解析与妙用实例

 更新时间：2023年03月06日 11:06:49   作者：可缺不可滥  
vue-hooks是简化组件定义、复用状态逻辑的一种最新尝试,下面这篇文章主要给大家介绍了关于vue2中@hook的解析与妙用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

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

这和生命周期函数mounted，created，updated有什么区别？

区别1：@hook 会在对应的生命周期函数执行后执行。

区别2：@hook 可以在父组件监听子组件的生命周期运行情况。

从这段vue源代码中我们能看到hook的部分调用逻辑，vm.$emit('hook:' + hook) 其实就是在调用我们写的@hook:mounted="xxx"，@hook这个api却没有在官方文档中出现，所以鲜有人知道它的存在和用法。

几种用法

用法一 将放在多个生命周期的逻辑，统一到一个生命周期中

通常写法

export default {
  components: {},
  data: () => {
    return {
      name: 'dx',
    };
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log(this.name);
    // 每一个小时刷新一次页面
    setInterval(() => {
      location.reload()
    }, 60 * 60 * 1000);
  },
}

@hook的用法

export default {
  components: {},
  data: () => {
    return {
      name: 'dx',
    };
  },
  created() {
    console.log('created');
    this.$on('hook:beforeMount', () => {
      console.log('beforeMount');
    });
    this.$on('hook:mounted', () => {
      console.log(this.name); // this 就是组件实例自己
      // 每一个小时刷新一次页面
      setInterval(() => {
        location.reload();
      }, 60 * 60 * 1000);
    });
  },
};

注意

  1. 按照生命周期执行的先后周期，我们只能mounted生命周期里，写这之后的生命周期，而不能写hook:beforeMount
  2. this.$on第二个回调函数的this指的是当前组件实例本身，无论这个回调函数是否是箭头函数。

用法二 监听子组件生命周期运行的情况

通常写法

// 父组件
<Children @buttonRender="ButtonRender"/>

export default {
  name: 'Parents',
  components: {
  	Children
  },
  data: () => {
    return {
      name: 'dx',
    };
  },
  methods: {
    ButtonRender() {
      console.log('渲染完成')
    }
  }
}
// 子组件
export default {
  name: 'Children',
  components: {},
  data: () => {},
  methods: {},
  mounted() {
  	this.$emit('buttonRender')
  }
}

@hook的写法

<Children @hook:mounted="ButtonRender"/>

export default {
  name: 'Parents',
  components: {
  	Children
  },
  data: () => {
    return {
      name: 'dx',
    };
  },
  methods: {
    ButtonRender() {
      console.log('渲染完成')
    }
  }
}

注意

  1. @hook的写法可以不需要在子组件里面编写其它代码
  2. 从vue源码中可以发现 vm.$emit('hook:' + hook) 这里虽然调用了hook但没有返回参数，也就是说，上面代码中ButtonRender没有默认参数。
  3. 同样承接着2来说，由于ButtonRender没有默认参数，所以我们无法在ButtonRender函数中获取子组件Children的实例。

为了解决3的问题，我尝试着想到一种方法，利用ref获取子组件的实例，将子组件的实例拿到父组件的this中。ButtonRender中的this就是父组件实例，和寻常methods中的函数没区别。

<Children ref="child1" @hook:mounted="ButtonRender"/>
export default {
  name: 'Parents',
  components: {
  	Children
  },
  data: () => {
    return {
      name: 'dx'
    };
  },
  mounted() {},
  methods: {
    ButtonRender() {
      console.log(this.$refs.child1) // this.$refs.child1就是子组件Children的实例了
      console.log('渲染完成')
    }
  }
};

但是，我们都知道，vue ref的绑定都是挂载完成之后，所以这个方法也只能用在@hook:mounted 、@hook:updated等mounted之后执行的生命周期中，而不能用在 比如@hook:beforeMount中。

运用场景

场景一

许多时候，我们不得不在不同的生命周期中执行某些逻辑，并且这些逻辑会用到一些通用的变量，这些通用变量按照之前的方式，我们不得不存在data中。

<script>
export default {
  data() {
    return {
        timer:null
      }
  }
  mounted () {
    this.timer = setInterval(() => {
	// todo
    }, 1000);
  }
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

优化后，就不存在这个问题，是不是很好用。

<script>
export default {
  mounted () {
    const timer = setInterval(() => {
	// todo
    }, 1000);
    this.$once('hook:beforeDestroy', function () {
        clearInterval(timer)
    })
  }
}
</script>

场景二

如果属于同一业务的逻辑要在不同的生命周期中执行，下面这样会更利于阅读和维护。

export default {
  created() {
    this.$on('hook:mounted', () => {
      挂载时执行一些业务A相关逻辑
    })
    this.$on('hook:updated', () => {
      挂载时执行一些业务A相关逻辑
    })
    this.$once('hook:beforeDestroy', () => {
      挂载时执行一些业务A相关逻辑
    })
  }
}

场景三

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

比如 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'
    }
  }
}

所有生命周期执行的顺序

第一次渲染

父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

总结

到此这篇关于vue2中@hook的解析与妙用的文章就介绍到这了,更多相关vue2 @hook妙用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • Vue3中局部组件和全局组件的使用教程详解

    Vue3中局部组件和全局组件的使用教程详解

    这篇文章主要为大家学习介绍了Vue3中局部组件和全局组件的使用方法，文中的示例代码讲解详细，具有一定的借鉴价值，需要的小伙伴可以学习一下
    2023-07-07
  • vue2使用eventbus踩坑解决

    vue2使用eventbus踩坑解决

    这篇文章主要为大家介绍了vue2使用eventbus踩坑解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • vue 里面的 $forceUpdate() 强制实例重新渲染操作

    vue 里面的 $forceUpdate() 强制实例重新渲染操作

    这篇文章主要介绍了vue 里面的 $forceUpdate() 强制实例重新渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue+element-ui实现头部导航栏组件

    vue+element-ui实现头部导航栏组件

    这篇文章主要为大家详细介绍了vue+element-ui实现头部导航栏组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue3.0引入百度地图并标记点的实现代码

    vue3.0引入百度地图并标记点的实现代码

    这篇文章主要介绍了vue3.0引入百度地图并标记点,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • vue.js iview打包上线后字体图标不显示解决办法

    vue.js iview打包上线后字体图标不显示解决办法

    这篇文章主要介绍了vue.js iview打包上线后字体图标不显示解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 详解用vue.js和laravel实现微信授权登陆

    详解用vue.js和laravel实现微信授权登陆

    本篇文章主要介绍了详解用vue.js和laravel实现微信授权登陆，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue2.0用户权限控制解决方案的示例

    Vue2.0用户权限控制解决方案的示例

    本篇文章主要介绍了Vue2.0用户权限控制解决方案的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue 防止页面加载时看到花括号的解决操作

    vue 防止页面加载时看到花括号的解决操作

    这篇文章主要介绍了vue 防止页面加载时看到花括号的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue基础语法知识梳理下篇

    Vue基础语法知识梳理下篇

    这篇文章主要介绍了Vue基础语法知识梳理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-12-12

最新评论