17_Vue高级监听器生命周期Vue组件组件通信

文章目录

  • 1. 数据监听器watch
  • 2. Vue生命周期
  • 3. Vue组件
  • 4. Vue组件通信
  • Appendix

1. 数据监听器watch

  • 首先watch需要单独引
import {watch} from 'vue'
  • watch函数监听ref响应式数据
    • watch(监听的内容,监听行为)
    • 监听行为默认为(newValue,oldValue)
let firstname = ref("")

watch(firstname,(newValue,oldValue)=>{
    console.log(`${oldValue}变为${newValue}`)
})

在这里插入图片描述

  • watch监听reactivate响应式数据

在这里插入图片描述

// watch监听reactive
watch(()=>lastname.name,(newValue,oldValue)=>{
  console.log(`${oldValue}=>${newValue}`)
})

在这里插入图片描述

  • watchEffect()监听所有响应式数据
  • 最好用的一种监听

在这里插入图片描述

let fullname = ref("")
let firstname = ref("")
let lastname = reactive({
    name:""
})
watchEffect(
    ()=>{
        console.log(firstname.value)
        console.log(lastname.name)
    }
)

监听数据小结:

  • html标签中写插值表达式显示最终的内容

  • 需要绑定的表单数据需要进行双向绑定v-model

  • script标签中只需要进行写监听函数即可

  • 最好用的监听函数watchEffect

2. Vue生命周期

  • 按以往Servlet的经验,Vue生命周期就是了解Vue执行哪几个任务,其生命流程

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码!

  • 周期图解:

在这里插入图片描述

  • 常见钩子函数

    • onMounted() 注册一个回调函数,在组件挂载完成后执行。

    • onUpdated() 注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用。

    • onUnmounted() 注册一个回调函数,在组件实例被卸载之后调用。

    • onBeforeMount() 注册一个钩子,在组件被挂载之前被调用。

    • onBeforeUpdate() 注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

    • onBeforeUnmount() 注册一个钩子,在组件实例被卸载之前调用。

    • beforeCreate和created中间完成一些响应式数据,计算数学,方法和监听器

生命周期案例

<script setup>

    import {ref,onUpdated,onMounted,onBeforeUpdate} from 'vue'
    
    let message =ref('hello')
   
    // 挂载完毕生命周期
    onMounted(()=>{
      console.log('-----------onMounted---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新前生命周期
    onBeforeUpdate(()=>{
      console.log('-----------onBeforeUpdate---------')
      console.log(message.value)
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新完成生命周期
    onUpdated(()=>{
      console.log('-----------onUpdated---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
</script>

<template>
  <div>
    <span id="span1" v-text="message"></span> <br>
    <input type="text" v-model="message">
  </div>
  
</template>

<style scoped>
</style>

3. Vue组件

在这里插入图片描述

  • 组件化就是一个页面由不同的组件构成,组件与组件之间也可以进行数据通信;

在这里插入图片描述

  • 如上图所示App.vue需要引入compoents中的三个组件,使其能够协调活动;

    • 1.首先导入模块

    • /** 引入多个vue组件 */
      import Header from './components/Header.vue'
      import Navigator from './components/Navigator.vue'
      import Content from './components/Content.vue'
      
    • 2.其次将多个模块写入到div

      在这里插入图片描述

    • 必须是div否则报错

    • 3.加上属性

    在这里插入图片描述

4. Vue组件通信

  • 组件传值的几种方式

    • 1.子传父
    • 2.父传子
    • 3.兄弟传参
  • 组件传参组件之间必须直接或间接存在父子关系

  • 案例演示 子组件向父组件传递信息

    • 导入defineEmits,用于定义向父组件提交数据的事件以及正式的提交数据
    • 定义向父组件提交的事件
    • 上一步需要设置返回值,用emits方法进行接收
    • 定义提交数据的方法

在这里插入图片描述

  • 小结:
1.子向父传参使用defineEmits函数
2.传递信息以列表形式
3.defineEmits使用emits接收,
4.一般是click触发传参,传入后台
  • 案例演示 子组件接收父组件信息

    • 1.导入denfineProps

    • 2.使用defineProps接收父组件传递的参数

    • 3.特别注意第二点,defineProps必须接收json串的形式;

    在这里插入图片描述

  • 小结

1.接收父类消息使用defineProps

2.defineProps包json串

3.defineProps里面定义接收的量和父类传递的变量名保持一致;传递过来的参数直接拿着使用即可

Appendix

  • 关于JS和TS选择
TS是JS的一个超集,使用TS之后,JS的语法更加的像JAVA,实际开发中用的确实更多,那么这里为什么我们没有立即使用TS进行开发,原因如下
  • 响应式数据&&非响应式数据

  • 响应数据:在数据变化时候,dom树跟着更新

  • 非响应数据:在数据变化的时候,dom树不跟着变化

  • vue3中,数据需要通过ref/reactive函数的处理才是响应式的;

  • ref/reactive函数导入就能用,vue自带;

 import {ref,reactive} from 'vue'
  • ref函数的特征

    • 在script标签中,操作ref 的响应式数据需要通过.value的形式操作
    • 在template标签中,操作ref直接用即可
  • .vue模块是放到index文件的一个原材料

  • main.js删除了会影响页面显示

  • button标签没有value值,直接在标签中写值即可

  • 导入ref还非得加{},否则无法使用

import {ref} from  'vue'
  • 关于html样式设计;两个div块进行并排,使用浮动操作,宽度使用% 别用像素进行处理即可;

  • @click@sendMenu的值应该是一个JavaScript表达式,它定义了当事件发生时应该执行的函数。所以调用函数时候不带括号;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

怎么换自己手机的ip地址

在互联网时代&#xff0c;IP地址已经成为了我们数字身份的一部分。无论是浏览网页、下载文件还是进行在线交流&#xff0c;我们的IP地址都在默默发挥着作用。然而&#xff0c;有时出于安全或隐私保护的考虑&#xff0c;我们可能需要更换手机的IP地址。那么&#xff0c;如何轻松…

Android Kotlin 异步操作回调转换为挂起函数

异步接口回调是一种通过接口将任务的执行和结果处理分离开来的编程设计模式。通常用于网络请求、数据库查询等耗时操作。 挂起函数是 Kotlin 中的一个特性&#xff0c;用于简化异步编程。挂起函数是可以在协程中暂停执行并恢复的函数&#xff0c;避免了回调地狱问题&#xff0…

【ARM Cache 与 MMU 系列文章 7.3 – ARMv8/v9 MMU 块描述符与页表描述符】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 上篇文章&#xff1a;【ARM Cache 系列文章 7.2 – ARMv8/v9 MMU 页表配置详细介绍 03 】 文章目录 MMU 块描述符与页描述符Block DescriptorBlock descriptor formatsBlock Entry 介绍Block En…

使用Gitblit软件开启git服务器

文章目录 使用Gitblit软件开启git服务器&#xff0c;供局域网其他电脑当做git仓库服务1. java依赖环境安装2. Mac系统操作2.1 下载Gitblit、配置参数2.2 启动服务2.3 终止服务&#xff1a;停止脚本即可 3. window系统操作3.1 下载Gitblit、配置参数3.2 启动服务3.3 终止服务&am…

大学生创新与创业搜题软件?推荐7个搜题软件和学习工具 #媒体#知识分享

随着大学课程的增多和知识的不断积累&#xff0c;大学生们常常面临着繁重的作业和复杂的题目。为了解决这一问题&#xff0c;许多大学生搜题软件应运而生。 1.彩虹搜题 这个是公众号 个性化推荐功能&#xff0c;精准满足需求。更高效地获取你想要的答案。 下方附上一些测试的…

PAT-1009 说反话(java实现)

还是这种题好&#xff0c;多简单啊&#xff0c;题目多清晰明了啊&#xff0c;多让人增加学习的热情啊。 题目 给定一句英语&#xff0c;要求你编写程序&#xff0c;将句中所有单词的顺序颠倒输出。 输入格式&#xff1a; 测试输入包含一个测试用例&#xff0c;在一行内给出总长…

Android Media Framework(四)Non-Tunneled组件的状态转换与buffer分配过程分析

本篇将继续深入OpenMAX IL Spec&#xff0c;详细解析Non-tunneled&#xff08;非隧道&#xff09;组件的初始化、数据传递以及组件销毁过程。通过阅读本篇内容&#xff0c;我们应能对Non-tunneled组件的buffer分配与状态转换过程有一个清晰的了解。 1、组件初始化 以下是IL Sp…

【Redis】构建强韧的远程Redis连接与端口保障机制完美指南

【Redis】构建强韧的远程Redis连接与端口保障机制完美指南 大家好 我是寸铁&#x1f44a; 总结了【Redis】构建强韧的远程Redis连接与端口保障机制完美指南✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 在当今的软件开发领域中&#xff0c;远程访问和操作数据存储是极为常见…

linux常用命令及其选项

1、常用命令 1.1、ls 选项说明-a显示所有文件及目录 (包括隐藏文件)-i显示inode-A同 -a选项 &#xff0c;但不列出 "." (目前目录) 及 ".." (父目录)-l列出信息详细(如文件型态、权限、拥有者、文件大小等)-R递归显示(若目录下有文件&#xff0c;则以下之…

Allegro导入DXF文件

阿里狗导入DXF文件 点击File–>Import–>DXF&#xff0c;注意DXF file那边不能使用中文路径和文件名以及非法字符&#xff0c;DXF units一般为mm&#xff0c;结构那边一般都用mm制作图&#xff0c;右边三个选项只需要勾选中间那个&#xff0c;意思是以增加的形式导入&am…

基于协调过滤算法商品推荐系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;商品管理&#xff0c;论坛管理&#xff0c;商品资讯管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;论坛&#xff0c;商品资讯&#xff0c;商家&#xff0c;商品 开发系统…

数据结构和算法一轮

前言 本文参考《2025年数据结构考研复习指导&#xff08;王道论坛组编&#xff09;》和相关文章&#xff0c;为考试前复习而写。 目录 前言 第一章线性表 1.1顺序表 1.2单链表 1.3循环链表 ​1.4双向链表 第二章栈和队列 2.1栈 2.2共享栈 2.3链栈 2.4队列 2.5循环…

基于Seatunnel最新2.3.5版本分布式集群安装部署指南(小白版)

基于Seatunnel2.3.5版本分布式集群安装部署 1.环境准备2.JDK安装3.Maven安装4.Seatunnel在master节点安装部署配置4.1.下载Seatunnel安装包4.2.解压下载好的tar.gz包4.3.下载连接器4.4.配置Seatunnel的系统环境变量4.5.配置 SeaTunnel Engine服务 JVM参数4.6.配置文件中集群相关…

前端使用轮播图的方法有哪些

前端使用轮播图的方法可以使用swiper:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 这是swiper官网,在官网里面可以找到很多轮播图的实际案例: 我们挑选可用的案例或者修改的案例,打开后打开源码,就可以获取到当前的源码了,加以调试就可以获得我们需要的结果, 例如: 上图…

1-什么是护网行动

1.什么是护网行动 2016年&#xff0c;公安部会同民航局、国家电网组织开展了“护网2016”网络安全攻防演习活动。同年&#xff0c;《网络安全法》颁布&#xff0c;出台网络安全演练相关规定:关键信息基础设施的运营者应“制定网络安全事件应急预案&#xff0c;并定期进行演练”…

训练营第三十一天 | 494.目标和474.一和零动态规划:完全背包理论基础518.零钱兑换II

494.目标和 力扣题目链接(opens new window) 难度&#xff1a;中等 给定一个非负整数数组&#xff0c;a1, a2, ..., an, 和一个目标数&#xff0c;S。现在你有两个符号 和 -。对于数组中的任意一个整数&#xff0c;你都可以从 或 -中选择一个符号添加在前面。 返回可以使…

如何提高网站排名?

提高网站排名是一个复杂的过程&#xff0c;涉及到多个方面的优化&#xff0c;包括但不限于内容质量、网站结构、用户体验、外部链接建设等&#xff0c;GSR这个系统&#xff0c;它是一种快速提升关键词排名的方案&#xff0c;不过它有个前提&#xff0c;就是你的站点在目标关键词…

OpenCV学习(4.6) 图像梯度

1.目标 在本教程中&#xff1a; 你会学到如何找到图像的梯度&#xff0c;边缘等。你会学到如下函数&#xff1a;**cv.Sobel()&#xff0c;cv.Scharr()&#xff0c;cv.Laplacian()** 等。 图像梯度是图像处理中的一个基本概念&#xff0c;它用于测量图像亮度变化的强度和方向…

php探针代码怎么写

创建php文件并输入代码&#xff0c;访问文件查看php版本、环境和系统配置信息&#xff0c;可使用ini_set()函数定制输出&#xff0c;但注意在生产环境中使用时要注重安全&#xff0c;因为它会泄露敏感信息。 PHP探针代码撰写指南 PHP探针代码是一种脚本&#xff0c;可提供关于…

接口的应用、 适配器设计模式

接口的应用 适配器设计模式 Inter package com.itheima.a09;public interface Inter {public abstract void show1();public abstract void show2();public abstract void show3();public abstract void show4();}InterAdapter package com.itheima.a09; //抽象 public abs…