Vue3技术5之watchEffect函数、Vue3生命周期、自定义hook函数

news2024/11/5 17:39:02

Vue3技术5

  • watchEffect函数
    • Demo.vue
    • 总结
  • Vue3生命周期
    • Vue3生命周期测试
      • App.vue
      • Demo.vue
    • 组合式API使用生命周期钩子
      • Demo.vue
    • 总结:
  • 自定义hook函数
    • 获取鼠标的x,y
      • Demo.vue
    • 使用hook方式
      • 文件目录
      • hooks/usePoint.js
      • App.vue
      • Demo.vue
      • Test.vue

watchEffect函数

Demo.vue

<template>
  <h2>和为:{{sum}}</h2>
  <button @click="sum++">和+1</button>
  <hr>
  <h2>当前的信息为:{{msg}}</h2>
  <button @click="msg+=''">修改信息</button>
  <hr>
  <h2>个人信息</h2>
  <h2>姓名:{{person.name}}</h2>
  <h2>年龄:{{person.age}}</h2>
  <h2>薪资:{{person.job.j1.salary}}K</h2>
  <button @click="person.name+='~'">修改信息</button>
  <button @click="person.age++">增加年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive, ref, watch,watchEffect} from 'vue'
export default {
    name: "Demo",
    setup(){
      //数据
      let sum=ref(0)
      let msg=ref('你好啊')
      let person=reactive({
        name:'张三',
        age:18,
        job:{
          j1:{
            salary:20
          }
        }
      })

      //监视
      /*watch(sum,(newValue,oldValue)=>{
        console.log("sum值发生了改变",newValue,oldValue)
      },{immediate:true})*/

      watchEffect(() => {
        const x1=sum.value
        const x2=person.job.j1.salary
        console.log('watchEffect所指定的回调执行了~'+x1+x2)
      })



      //返回一个对象(常用)
      return{
          sum,
          msg,
          person
      }
    },
}
</script>

<style scoped>

</style>

请添加图片描述

总结

  1. watch的套路是:既要指明监视的属性,也要指明监视的回调
  2. watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性
  3. watchEffect有点像computed
    (1)但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值
    (2)而watchEffect更注重的是过程(回调函数的函数体), 不用写返回值
//watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调
watchEffect(()=>{
	const x1=sum.value
	const x2=person.age
	console.log('watchEffect配置的回调执行了')
})

Vue3生命周期

  • Vue2.x生命周期:
    请添加图片描述
  • Vue3生命周期:
    请添加图片描述

Vue3生命周期测试

App.vue

<template>
  <button @click="toggle=!toggle">切换显示/隐藏</button>
  <Demo v-if="toggle"></Demo>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";
export default {
  name: 'App',
  components: {Demo},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

Demo.vue

<template>
  <h2>当前求和为:{{sum}}</h2>
  <button @click="sum++">点我+1</button>
</template>

<script>
import { ref } from 'vue'
export default {
    name: "Demo",
    setup(){
      //数据
      let sum=ref(0)

      //返回一个对象(常用)
      return{
          sum
      }
    },
    //通过配置项形式使用生命周期钩子
    beforeCreate() {
      console.log("-------beforeCreate-----------")
    },
    created() {
      console.log("--------created----------")
    },
    beforeMount() {
      console.log("--------beforeMount----------")
    },
    mounted() {
      console.log("--------mounted----------")
    },
    beforeUpdate() {
      console.log("--------beforeUpdate----------")
    },
    updated() {
      console.log("--------updated----------")
    },
    beforeUnmount() {
      console.log("--------beforeUnmount----------")
    },
    unmounted() {
      console.log("--------unmounted----------")
    }
}
</script>

<style scoped>

</style>

请添加图片描述

组合式API使用生命周期钩子

Demo.vue

<template>
  <h2>当前求和为:{{sum}}</h2>
  <button @click="sum++">点我+1</button>
</template>

<script>
import { ref ,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
    name: "Demo",
    setup(){
      console.log("--------setup----------")
      //数据
      let sum=ref(0)

      //通过组合API的形式去使用生命周期钩子

      onBeforeMount(() => {
         console.log("--------onBeforeMount----------")
      })
      onMounted(() => {
         console.log("--------onMounted----------")
      })
      onBeforeUpdate(() => {
         console.log("--------onBeforeUpdate----------")
      })
      onUpdated(() => {
         console.log("--------onUpdated----------")
      })
      onBeforeUnmount(() => {
         console.log("--------onBeforeUnmount----------")
      })
      onUnmounted(() => {
         console.log("--------onUnmounted----------")
      })



      //返回一个对象(常用)
      return{
          sum
      }
    },
    //通过配置项形式使用生命周期钩子
    /*beforeCreate() {
      console.log("-------beforeCreate-----------")
    },
    created() {
      console.log("--------created----------")
    },
    beforeMount() {
      console.log("--------beforeMount----------")
    },
    mounted() {
      console.log("--------mounted----------")
    },
    beforeUpdate() {
      console.log("--------beforeUpdate----------")
    },
    updated() {
      console.log("--------updated----------")
    },
    beforeUnmount() {
      console.log("--------beforeUnmount----------")
    },
    unmounted() {
      console.log("--------unmounted----------")
    }*/
}
</script>

<style scoped>

</style>

请添加图片描述

总结:

  1. Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有两个被更名
  • beforeDestroy改名为beforeUnmount
  • destroyed改名为unmounted
  1. Vue3.0也提供了Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
  • beforeCreate===>setup()
  • created===>setup()
  • beforeMount===>onBeforeMount
  • mounted===>onMounted
  • beforeUpdate===>onBeforeUpdate
  • updated===>onUpdated
  • beforeUnmount===>onBeforeUnmount
  • unmounted===>onUnmounted

自定义hook函数

  1. 什么是hook?——本质是一个函数,把setup函数中使用的Composition API进行了封装
  2. 类似于Vue2.x中的mixin
  3. 自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂

获取鼠标的x,y

Demo.vue

<template>
  <h2>当前求和为:{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前点击时,鼠标的坐标为,x:{{point.x}},y:{{point.y}}</h2>
</template>

<script>
import {ref, reactive, onMounted, onBeforeUnmount} from 'vue'
export default {
    name: "Demo",
    setup(){
      console.log("--------setup----------")
      //数据
      let sum=ref(0)

      let point=reactive({
        x:0,
        y:0
      })

      //方法
      function savePoint(event){
        point.x=event.pageX
        point.y=event.pageY
        console.log(event.pageX,event.pageY)
      }

      onMounted(()=>{
        window.addEventListener('click',savePoint)
      })

      onBeforeUnmount(() => {
         window.removeEventListener('click',savePoint)
      })



      //返回一个对象(常用)
      return{
          sum,
        point
      }
    },
}
</script>

<style scoped>

</style>

请添加图片描述

使用hook方式

文件目录

在这里插入图片描述

hooks/usePoint.js

import {onBeforeUnmount, onMounted, reactive} from "vue";

export default function (){
    //实现鼠标“打点”相关的数据
    let point=reactive({
        x:0,
        y:0
    })

    //实现鼠标“打点”相关的方法
    function savePoint(event){
        point.x=event.pageX
        point.y=event.pageY
        console.log("x,y",point.x,point.y)
    }

    //实现鼠标“打点”相关的生命周期钩子
    onMounted(()=>{
        window.addEventListener('click',savePoint)
    })

    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })

    return point

}

App.vue

<template>
  <button @click="toggle=!toggle">切换显示/隐藏</button>
  <Demo v-if="toggle"></Demo>
  <hr>
  <Test v-if="toggle"></Test>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";
import Test from "@/components/Test";
export default {
  name: 'App',
  components: {Demo,Test},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

Demo.vue

<template>
  <h2>当前求和为:{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前点击时,鼠标的坐标为,x:{{point.x}},y:{{point.y}}</h2>
</template>

<script>
import {ref} from 'vue'
import usePoint from "@/hooks/usePoint";
export default {
    name: "Demo",
    setup(){
      console.log("--------setup----------")
      //数据
      let sum=ref(0)

      let point=usePoint()

      //返回一个对象(常用)
      return{
          sum,
          point
      }
    },
}
</script>

<style scoped>

</style>

Test.vue

<template>
<div>
  <h2>我是Test组件</h2>
  <h2>当前点击时,鼠标的坐标为,x:{{point.x}},y:{{point.y}}</h2>
</div>
</template>

<script>
import usePoint from "@/hooks/usePoint";
    export default {
        name: "Test",
      setup(){
          let point=usePoint()

        return{
            point
        }
      }
    }
</script>

<style scoped>

</style>

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/437658.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MicroPython ESP8266 GPIO引脚使用详解

MicroPython ESP8266 GPIO引脚使用 &#x1f4cc;相关篇《【MicroPython esp8266】固件烧写教程》 ✨本案例基于Thonny平台开发。✨ &#x1f4dc;固件版本信息&#xff1a;MicroPython v1.19.1 on 2022-06-18; ESP module with ESP8266 &#x1f516;ESP8266可用管脚有&…

计算机组成原理——第六章总线(上)

误逐世间乐&#xff0c;颇穷理乱情 文章目录 前言6.1.1 总线概述6.1.2 总线的性能指标6.2 总线仲裁(408不考) 前言 本章在概述部分我们会首先介绍一下总线的基本概念&#xff0c;介绍一下总线的分类以及经典结构&#xff0c;介绍一些性能指标来评价总线的性能如何&#xff0c;…

电子招标采购系统源码—企业战略布局下的采购

​ 智慧寻源 多策略、多场景寻源&#xff0c;多种看板让寻源过程全程可监控&#xff0c;根据不同采购场景&#xff0c;采取不同寻源策略&#xff0c; 实现采购寻源线上化管控&#xff1b;同时支持公域和私域寻源。 询价比价 全程线上询比价&#xff0c;信息公开透明&#xff0…

通过单线程/线程池/分治算法三种方式实现1亿个数字的累加

一、任务类型 我们在做项目的时候&#xff0c;都需要考虑当前的项目或者某一个功能主要的核心是什么&#xff1f;是CPU密集计算型&#xff0c;还是IO密集型任务。我们调整线程池中的线程数量的最主要的目的是为了充分并合理地使用 CPU 和内存等资源&#xff0c;从而最大限度地…

AIGC潮水中,重新理解低代码

如果将一句话生成应用形容成L4级的“无人驾驶”&#xff0c;伙伴云的「AI搭建」则更像L2级的“辅助驾驶”。 作者|斗斗 出品|产业家 2023年&#xff0c;AIGC下的低代码赛道“暗流涌动”。 “对于「AI搭建」的搭建效果&#xff0c;尤其是在场景覆盖的广度上&#xff0c;连…

正式开赛|2023年“桂林银行杯”数据建模大赛暨全国大学生数学建模竞赛广西赛区热身赛

为学习贯彻党的二十大工作报告中关于加快发展数字经济、促进数字经济和实体经济深度融合的重要指示&#xff0c;不断推进数字化转型与金融科技创新&#xff0c;桂林银行联合全国大学生数学建模竞赛广西赛区组委会、广西应用数学中心&#xff08;广西大学&#xff09;共同主办20…

如何选择CDN厂商

如果您的在线业务面临着流量和访客数量的增加&#xff0c;如果您想提高网站速度和用户体验&#xff0c;选择合适的CDN提供商是朝着正确方向迈出的一步&#xff0c;那么如何来选择最合适的CDN厂商呢&#xff0c;火伞云小编今天为您解答&#xff1a; 一、测试潜在的CDN提供商 对…

centos7.6非默认端口的ssh免密登录(centos7.6指定端口的ssh免密登录)

非默认端口号&#xff08;以6622端口号示例&#xff09;的免密登录 1.1. 修改/etc/ssh/sshd_config Port 6622 1.2. 重启sshd服务 service sshd restart 1.3. 创建用户ds(可选&#xff0c;这里以ds用户做免密为示例) adduser ds&#xff1b; 1.4. 查看ds用户(可选) id ds; …

HBase高手之路6—HBase高可用

文章目录 HBase的高可用一、HBase高可用简介二、搭建HBase的高可用1.在HBase的conf文件夹中创建一个backup-masters的文件2.修改backup-masters&#xff0c;添加作为备份master的节点信息3.分发backup-masters文件到其他的服务器4.重新启动HBase5.查看web ui 三、测试高可用1.尝…

辉煌优配|黄金价格创近两年半新高!2只黄金股一季度预增

黄金板块早盘走强。 4月14日早盘&#xff0c;黄金板块团体走高&#xff0c;次新股四川黄金开盘半小时内拉升至涨停&#xff0c;封单资金到达7279.78万元&#xff0c;中润资源、晓程科技涨幅居前&#xff0c;分别为8.96%、8.48% 消息面上来看&#xff0c;近期全球黄金期货价格节…

Matlab进阶绘图第17期—气泡热图

气泡热图是一种特殊的热图&#xff08;Heatmap&#xff09;。 与传统热图相比&#xff0c;气泡热图利用不同颜色、不同大小的圆形表示数据的大小&#xff0c;可以更加直观地对矩阵数据进行可视化表达。 本文使用自制的bubbleheatmap小工具进行气泡热图的绘制&#xff0c;先来…

AttributeError: ‘LTP‘ object has no attribute ‘init_dict‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【刷题】小技巧

好久没更了 写天梯模拟L1都有题不能AC&#xff0c;是什么品种的蒟蒻 L1-7 谷歌的招聘 题目详情 - L1-7 谷歌的招聘 (pintia.cn) 自己写半天都是Segmentation Fault&#xff0c; 学习一下几个函数叭// 1.substr&#xff08;&#xff09;函数 获取子串 #include<bits/st…

OpenCV 安卓编程示例:1~6 全

原文&#xff1a;OpenCV Android Programming By Example 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【ApacheCN 计算机视觉 译文集】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 当别人说你没有底线的时候&#xff0c;…

国产AI软件,10年前已出现,Excel表格变软件,用友用户:有救了

10年前&#xff0c;国产AI软件已经出现 在国内&#xff0c;我们早在10年就已经有AI软件&#xff0c;而且现在还在使用。 10年前&#xff0c;这款软件跟现在市面上流行的ChatGPT和文心一言相比&#xff0c;最为先进的是&#xff1a;不根本用写代码&#xff0c;只要会画表格就可…

【Docker01】入门

目录 概述 Docker平台 Docker可以做什么 快速、一致地交付应用程序 响应式部署和扩展 在同一硬件上运行更多工作负载 Docker架构 Docker守护程序&#xff08;The Docker daemon&#xff09; Docker客户端&#xff08;The Docker client&#xff09; Docker桌面&#x…

KingSCADA3.8保姆级安装教程

大家好&#xff0c;我是雷工&#xff01; 最近开始学习KingSCADA&#xff0c;今天这篇详细记录安装KingSCADA3.8的过程。 首先下载需要的安装版本&#xff0c;此处以从官网下载的最新版本KingSCADA3.8为例&#xff0c;双击&#xff1a;Setup.exe ; 一、安装主程序 1、点击“…

电脑端(PC)按键精灵2013——入门小白 详细 教程

电脑端(PC)按键精灵——1.入门详细说明&#xff1a; 本篇幅介绍的按键精灵的下载和安装&#xff1b;如果已经安装则直接看下面命令内容 电脑端(PC)按键精灵——2.键盘命令和鼠标命令 电脑端(PC)按键精灵——3其他命令 电脑端(PC)按键精灵——4.控制命令&#xff08;判断、循…

使用华为云免费资源训练Paddle UIE模型

一、创建虚拟环境 好习惯&#xff0c;首先创建单独的运行环境 conda create -n uie python3.10.9 conda activate uie 二、安装paddle框架及paddlenlp 2.1 参考官方文档安装paddle 开始使用_飞桨-源于产业实践的开源深度学习平台 首先查看自己服务器cuda版本&#xff0c;…

redis_5种数据结构及其底层实现原理详解

1、 redis中的数据结构 Redis支持五种数据类型&#xff1a;string&#xff08;字符串&#xff09;&#xff0c;hash&#xff08;哈希&#xff09;&#xff0c;list&#xff08;列表&#xff09;&#xff0c;set&#xff08;无序集合&#xff09;及zset(有序集合) 在秒杀项目里…