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表达式,它定义了当事件发生时应该执行的函数。所以调用函数时候不带括号;

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

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

相关文章

十种排序算法的python实现

排序 1. 冒泡排序&#xff08;Bubble Sort&#xff09; 基本原理&#xff1a; 冒泡排序是一种简单的排序算法&#xff0c;它重复地遍历待排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。遍历数列的工作是重复地进行直到没有再需要交…

技术周总结2024.06.03~06.09(K8S HikariCP数据库连接池)

文章目录 一、06.05 周三1.1) 问题01: 容器领域&#xff0c;Docker与 K8S的区别和联系Docker主要功能和特点&#xff1a;使用场景&#xff1a; Kubernetes (K8S)主要功能和特点&#xff1a;使用场景&#xff1a; 联系和区别联系&#xff1a;区别&#xff1a; 结合使用总结 二、…

【ARM Cache 系列文章 1.2 -- Data Cache 和 Unified Cache 的详细介绍】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Data Cache and Unified Cache数据缓存 (Data Cache)统一缓存 (Unified Cache)数据缓存与统一缓存的比较小结 Data Cache and Unified Cache 在 ARM架构中&#xff0c;缓存&#xff08…

Attention注意力机制:理论基础、核心架构、应用领域及最新研究动态

Attention机制源于对序列建模中长期依赖关系的有效捕获需求&#xff0c;其理论基础在于让模型动态分配权重以聚焦于输入序列中与当前任务相关的关键部分。核心架构包括Query-Key-Value三元组计算、Softmax归一化的注意力得分、加权求和生成上下文向量&#xff0c;以及扩展至多头…

vue2学习(06)----vuex

目录 一、vuex概述 1.定义 优势&#xff1a; 2.构建环境步骤 3.state状态 4.使用数据 4.1通过store直接访问 4.2通过辅助函数 5.mutations修改数据&#xff08;同步操作&#xff09; 5.1定义 5.2步骤 5.2.1定义mutations对象&#xff0c;对象中存放修改state数据的方…

每日一题——Python实现PAT乙级1037 在霍格沃茨找零钱(举一反三+思想解读+逐步优化)

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 时间复杂度分析&#xff1a; 空间复杂度分析&#xff1a; 我要更强 哲学…

立创·天空星开发板-GD32F407VE-USART

本文以 立创天空星开发板-GD32F407VET6-青春版 作为学习的板子&#xff0c;记录学习笔记。 立创天空星开发板-GD32F407VE-USART 基础通信概念同步通信 & 异步通信串行通信 & 并行通信双工 & 单工通讯速率码元 串口通信数据帧 串口封装 基础通信概念 通信协议是网络…

Python编程学习第一篇——Python零基础快速入门(五)—变量

在上一节中讲的元组和元组操作中&#xff0c;经常看到 tup (1, 2, 3) 这样的代码&#xff0c;这里面其实涉及了编程语言中一个重要的概念就是变量&#xff0c;前面的等式中tup是变量&#xff0c;(1, 2, 3) 是赋与变量的值。前面的一些文章的代码中也都有用到变量&#xff0c;下…

STM32F103实现双击、长按、短按后续

经过上次(上一篇文章)的bug&#xff0c;这次进行了修改&#xff0c;基本原理就是使用基本定时器的计数功能&#xff0c;根据计算赋值合适的arr&#xff08;预装载值&#xff09;以及psc&#xff08;预装载系数&#xff09;&#xff0c;使其实现100ms计时一次&#xff0c;在封装…

校园生活服务平台的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;跑腿管理&#xff0c;文娱活动管理&#xff0c;活动申请管理&#xff0c;备忘录管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff…

正确挑选百兆超薄款工业级网络/脉冲变压器(网络隔离滤波器)

Hqst华强盛&#xff08;石门盈盛电子&#xff09;导读&#xff1a;工业级百兆超薄款网络变压器的生产要特殊的超薄磁芯配正确线径的铜线&#xff0c;使用符合相应防潮标准的凝固胶水。 一 ̖ 首先来看下商业级的超薄款的百兆网络变压器&#xff1a; 商业级&#xff08;消费级&…

麒麟操作系统运维工程师(KYCP)课程,实现职业突破

在IT行业中&#xff0c;掌握先进的技能和知识是实现职业突破的关键。如果你希望在麒麟操作系统上成为一名卓越的运维工程师&#xff0c;那么麒麟操作系统运维工程师&#xff08;KYCP&#xff09;课程将是你的理想全面提升学员在麒麟操作系统环境下的运维能力。课程内容涵盖安全…

mac读不出来ntfs mac硬盘读不出来盘

新买的Mac电脑由于需要导入旧电脑的数据&#xff0c;因此通常会读取备份硬盘&#xff0c;通过硬盘进行导入。不过由于各种原因&#xff0c;有些mac用户反馈无法正常读取或写入NTFS移动硬盘&#xff0c;下面就通过本篇教程&#xff0c;简单讲述当mac读不出来ntfs&#xff0c;mac…

开关电源中电感设计

开关电源设计中电感 只有充分理解电感在DC/DC电路中发挥的作用,才能更优的设计DC/DC电路。本文还包括对同步DC/DC及异步DC/DC概念的解释。 在开关电源的设计中电感的设计为工程师带来的许多的挑战。工程师不仅要选择电感值,还要考虑电感可承受的电流,绕线电阻,机械尺寸等…

监控易监测对象及指标之:全面监控华为FusionInsight实例

在大数据时代&#xff0c;华为FusionInsight作为一款高性能的大数据处理平台&#xff0c;承载着企业关键业务数据的处理和分析任务。为了确保FusionInsight实例的稳定运行&#xff0c;对其进行全面监控显得尤为重要。本文基于监控易工具&#xff0c;对华为FusionInsight实例的监…

产气荚膜梭菌定植与婴儿食物过敏之间的关联

谷禾健康 牛奶蛋白过敏&#xff08;CMPA&#xff09;是婴儿最常见的食物过敏类型之一。粪便病原菌培养显示产气荚膜梭菌阳性率超过30%&#xff0c;明显高于其他细菌。因此推测产气荚膜梭菌定植可能是婴儿牛奶蛋白过敏的发病因素之一。 一项真实世界的研究&#xff0c;杨敏团队从…

Linux操作系统:MongoDB在虚拟机环境下的安装及部署

上传 MongoDB 安装包 将从官网下载好的 MongoDB 上传到要安装的服务器目录中&#xff0c;建议目录为&#xff1a;/usr/local/ 解压 MongoDB 安装包 cd /usr/local/ tar -zxvf mongodb-linux-x86_64-4.0.0.tgz mv mongodb-linux-x86_64-4.0.0 mongodb 创建 MongoDB 必要目录 …

高通CSIPHY combo mode介绍

目录 使用MIPI Switch 使用高通平台CSIPHY的Combo Mode YYYY使用Combo Mode电路图如下: 如何设置combo PHY mode CSIInfo configuration when camera works in normal mode 平台SoC一般都有多个CSIPHY以满足当前手机相机设计多摄的情况,但是一款SoC CSIPHY的个数也是一定…

【python】错误SyntaxError: invalid syntax的解决方法总结

解决Python报错&#xff1a;【Python】错误SyntaxError: invalid syntax的解决方法总结 SyntaxError是Python编程中常见的错误之一&#xff0c;它表明代码中有语法错误。这种错误可能由多种原因引起&#xff0c;包括但不限于拼写错误、错误的缩进、缺少括号等。本文将介绍几种常…

Python 机器学习 基础 之 【常用机器学习库】 scikit-learn 机器学习库

Python 机器学习 基础 之 【常用机器学习库】 scikit-learn 机器学习库 目录 Python 机器学习 基础 之 【常用机器学习库】 scikit-learn 机器学习库 一、简单介绍 二、scikit-learn 基础 1、安装 scikit-learn 2、导入 scikit-learn 3、数据准备 4、数据分割 5、训练模…