首页 > 其他分享 >vue的几个小分享

vue的几个小分享

时间:2024-01-26 09:34:14浏览次数:26  
标签:vue document 几个 钩子 销毁 scrollFun 组件 分享 scroll

1.VNode 钩子

在每个组件或html标签上,我们可以使用一些特殊的(文档没写的)钩子作为事件监听器。这些钩子有:

  • onVnodeBeforeMount

  • onVnodeMounted

  • onVnodeBeforeUpdate

  • onVnodeUpdated

  • onVnodeBeforeUnmount

  • onVnodeUnmounted

我主要是在组件上使用onVnodeMounted,当需要在组件挂载时执行一些代码,或者在更新时使用onVnodeUpdated进行调试,可以确定的是所有这些钩子都能在某些情况下派上用场。

<script setup>
    import { ref } from 'vue'
    const count = ref(0)
    function onMyComponentMounted() {}
    function divThatDisplaysCountWasUpdated() {}
</script>

<template>
    <MyComponent @vnodeMounted="onMyComponentMounted" />
    <div @vnodeUpdated="divThatDisplaysCountWasUpdated">{{ count }}</div>
</template>

2、事件的销毁

当一个组件被销毁时,我们应该清除组件中添加的 全局事件 和 定时器 等来防止内存泄漏

Vue3 的 HOOK 可以让我们将事件的声明和销毁写在一起,更加可读

function scrollFun(){ /* ... */}
document.addEventListener("scroll", scrollFun)

onBeforeUnmount(()=>{
  document.removeEventListener("scroll", scrollFun)
})

 

Vue2 可以在 optionsAPI beforeDestroy 中销毁事件

export default {
  created() {
    document.addEventListener("scroll", scrollFun)
  },
  beforeDestroy(){
    document.removeEventListener("scroll", scrollFun)
  }
}

 

标签:vue,document,几个,钩子,销毁,scrollFun,组件,分享,scroll
From: https://www.cnblogs.com/jzm2842688813/p/17988617

相关文章

  • vue实现将word转换为HTML页面,并实现类似word的目录导航和关键字搜索跳转
    <template>  <divclass="content">    <divclass="header">      <divclass="title">        XXXXXX      </div>      <divclass="search">   ......
  • Vue 3高级响应式数据探秘:原理、用法详解与实战示例!
     在Vue3中,数据的变化通过响应式系统来实现,该系统基于ES6的Proxy对象。Proxy对象允许拦截并自定义操作,因此Vue可以通过代理对象来实现对数据的监听和触发相应的操作。以下是Vue3中监测数据改变的原理、使用方法和步骤的详细描述,以及一个实例代码:原理:Vue3的响应式系统基于P......
  • Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南
     在Vue中使用JSON文件有多种方式,包括使用fetch方法加载JSON文件、使用axios库加载JSON文件,以及将JSON文件导入为模块。以下是详细描述和相应的示例代码:1.使用fetch方法加载JSON文件:步骤:创建一个JSON文件,例如 data.json://data.json{"name":"John","age":......
  • 【专题】2023年工业4.0行业报告汇总PDF合集分享(附原数据表)
    原文链接:https://tecdat.cn/?p=34923原文出处:拓端数据部落公众号这份报告合集探讨了中国工业互联网平台在工业产业升级和智能制造背景下的现状、挑战和机遇。报告分析了工业互联网平台市场的发展阶段、平台玩家的产品和服务的底层逻辑以及变化趋势,并深入探讨了补贴减少、数据归......
  • vue项目安装更新依赖时,npm install 卡住
    在代码安装或者更新依赖时,经常碰到npminstall以后很多种卡住的情况,记录部分1.版本不对可能电脑存在多个项目,多个node版本。安装使用nvm(node版本管理工具),1.安装,先把已安装的node下载掉https://nvm.uihtm.com/download.html(目前国内可下载)https:/......
  • 2024年1月Java项目开发指南10:vite+Vue3项目创建
    新建项目安装routernpminstallvue-router在src下新建目录router,在目录下新建index.js在index.js里面配置路由import{createRouter,createWebHistory}from'vue-router';//定义路由constroutes=[//在这里配置路由];//创建路由实例constrouter=......
  • 这几个月
    回想起来,我那么畏惧退役,大概还是生活没有什么希望,对回班后的生活感到惧怕吧。一开始回班的时候是孤独的,没有人和我说话,我只能一个人默默地补以前的物理作业,唯一的乐趣是听旁边的化竞老哥说p话。这段时间精神状态很不稳定,脑力衰竭很严重,大概是没睡够导致的。转机发生在CMO银......
  • 程序员有哪些必读书单,目前保存的分享一下
    1.数据结构与算法邓俊辉清华大学出版社2.设计模式可复用面向对象软件的基础China-Pub.comhttp://www.china-pub.com/ebook/英文版DesignPatternsElementsofReusableObject-OrientedSoftwareErichGammaRichardHelmRalphJohnsonJohVissides 3.职场救赎写给......
  • vue2.x项目升级到2.7
    背景老代码库了,但是升级到v3的话成本比较大,准备先升级到2.7,用上compositon-api,后续再引入ts,慢慢改过来。改动点//package.json{..."vue":"^2.7.0",..."vue-template-compiler":"^2.6.10",//移除掉,用不上了"vue-loader":"^15.10.0&quo......
  • vue print.js 打印 此处打印不包含页面的页码 (打印方法二)
    <template><divclass="modalContainerprintAsset"ref="modalContainer"><divv-for="(items,index)intableDataPrint":key=indexstyle="page-break-after:always;zoom:1"ref="show......