Vue3(二)计算属性Computed，监视属性watch，watchEffect,标签的ref属性，propos属性，生命周期，自定义hook

news2024/12/27 2:08:10

文章目录

  • 一 、计算属性
    • 1. 简写
    • 2. 完整写法
  • 二、监视watch
    • 1. 监视【ref】定义的【基本类型】数据
    • 2. 监视【ref】定义的【对象类型】数据
    • 3. 监视【reactive】定义的【对象类型】数据
    • 4. 监视【ref】或【reactive】定义的【对象类型】数据中的某个属性
    • 5. 监视多个数据
    • 总结
  • 三、watchEffect
  • 四、标签的ref属性
  • 五、Propos
    • 1.子组件接收，接收并保存
    • 2. 限制接收的类型，限制必要性
    • 3. 子组件给默认值
  • 六、生命周期
  • 七、自定义Hook

一 、计算属性

computed:根据已有数据计算出新数据（和Vue2中的computed作用一致）.
在这里插入图片描述
还是那个案例，当输入框里的内容变化时，全名跟着修改。

1. 简写

语法：computed(()=>{....})

// 引入computed 
import { ref, computed } from "vue"

let firstName = ref("zhang")
let lastName = ref("san")

// 这么定义的fullName是一个计算属性，且是只读的（也就是简写形式）
let fullName = computed(() => {
  return firstName.value + "-" + lastName.value
})

2. 完整写法

语法：computed({ get() {...}, set(val) {... }, })

给按钮绑定事件，修改姓名

 <button @click="changeFullName">全名改为：li-si</button>

在这里插入图片描述
代码：

let fullName = computed({
  get() {
    return firstName.value + "-" + lastName.value
  },
  set(val) {
    const [str1, str2] = val.split("-")
    firstName.value = str1
    lastName.value = str2
  },
})

二、监视watch

  • 作用：监视数据的变化（和Vue2中的watch作用一致）
  • 特点：Vue3中的watch只能监视以下四种数据：
  1. ref定义的数据(基本数据类型，对象类型)。
  2. reactive定义的数据。
  3. 对象类型数据里的某个属性。
  4. 一个包含上述内容的数组。

1. 监视【ref】定义的【基本类型】数据

语法：watch(监视对象，回调函数)
监视对象直接写变量名即可，监视的是其value值的改变。

import { ref, watch } from "vue"
// 数据
let sum = ref(0)
// 方法
function changeSum() {
  sum.value += 1
}
// 监视 watch(监视对象，回调函数)；
const stopWatch = watch(sum, (newValue, oldValue) => {
  if (newValue > 10) {
    stopWatch()
  }
})

如果想停止监视，则接收watch的返回值,watch返回的值是一个函数stopWatch,调用该函数就停止监视sum

2. 监视【ref】定义的【对象类型】数据

在这里插入图片描述

import { ref, watch } from "vue"
// 数据
let person = ref({
  name: "tom",
  age: 18,
})
function changeName() {
  person.value.name += "~"
}
function changeAge() {
  person.value.age += 1
}
function changePerson() {
  person.value = { name: "李四", age: 50 }
}
watch(person, (newValue, oldValue) => {
  console.log("person变化", newValue, oldValue)
})

点击这三个按钮发现，只有当点击修改整个人时，watch监视才起作用。因为对于ref定义的对象数据类型，watch监视的是地址值。若想监视对象里面的值，则开启深度监视

watch(
  person,
  (newValue, oldValue) => {
    console.log("person变化", newValue, oldValue)
  },
  { deep: true } // 也可配置 immediate: true
)

另外，点击前两个按钮发现newValue和oldValue是同一个值。点击修改整个人时，两个值才不一样。
在这里插入图片描述
因为修改名字和年龄只是修改了对象的属性，而修改整个人是修改了对象的地址。地址不一样了，newValue和oldValue值也就不一样了。

总结：

  1. 语法：watch(监视对象，回调函数，{配置对象deep、immediate等等.....})
  2. 监视【ref】定义的【对象类型】数据时，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
  3. 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。
    若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

3. 监视【reactive】定义的【对象类型】数据

把上边的代码改了改：
在这里插入图片描述
点击三个按钮，控制台打印的结果：
在这里插入图片描述

  1. 不用写deep:true,默认开启了深度监听。并且这个深度监听是不可关闭的。
  2. 注意到这三行打印的结果里newValue和oldValue都是一样的值，这是因为person对象的地址始终没有发生变化。

总结：

监视reactive定义的【对象类型】数据时，默认开启了深度监视且无法关闭。

4. 监视【ref】或【reactive】定义的【对象类型】数据中的某个属性

上边都是监视一个对象，这里监视对象的某属性。
在这里插入图片描述

let person = reactive({
  name: "张三",
  age: 18,
  car: {
    c1: "奔驰",
    c2: "宝马",
  },
})
// 方法
function changeName() {
  person.name += "~"
}
function changeAge() {
  person.age += 1
}
function changeC1() {
  person.car.c1 = "奥迪"
}
function changeC2() {
  person.car.c2 = "大众"
}
function changeCar() {
// reactive对象里属性对象可以这样改
  person.car = { c1: "雅迪", c2: "爱玛" }
}

只监视对象里的某一个基本数据类型age

// 第一个参数写成函数的形式，指定监听的属性;
// 如果写的是person，则无论点击哪个按钮，都会被监听到
watch(() => person.age,  (newValue, oldValue) => {
    console.log("age改变", newValue, oldValue) // age改变 19 18
  }
)

监视对象里的对象类型属性car

watch(
  () => person.car,
  (newValue, oldValue) => {
    console.log("person.car变化了", newValue, oldValue)
  },
  { deep: true }
)

不写deep:true，则监视的是car这个对象,当其地址发生变化时才会执行console.log打印（也就是不会默认开始深度监听）。
写deep:true，则也监视到car内部的属性c1,c2。属性或对象发生变化都会打印
在这里插入图片描述

总结：

  1. 监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
  2. 监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
  3. 监视reactive响应式对象中的某个属性，且该属性是对象类型的(car),不会默认开始深度监听

5. 监视多个数据

还是4中的案例，需求是监视人的姓名和车

watch(
  [() => person.name, person.car],
  (newValue, oldValue) => {
    console.log("person.car变化了", newValue, oldValue)
  },
  { deep: true }
)

总结

  1. 对于ref定义的基本数据类型，监视的是其value值
  2. 对于ref定义的对象数据类型，监视的是对象的地址值,若要监视对象里的属性，需要手动开启深度监视
  3. 对于reactive定义的对象数据类型，默认开启了深度监视
  4. 对于ref或reactive对象类型里的某个属性，如果是该属性是对象(car),监视的是其地址值，不会默认开始深度监视

三、watchEffect

watch对比watchEffect：
(1) 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
(2) watch：要明确指出监视的数据
(3) watchEffect：不用明确指出监视的数据（函数中用到哪些属性，就监视哪些属性）

在这里插入图片描述

import { ref, watch, watchEffect } from "vue"
// 数据
let temp = ref(0)
let height = ref(0)

// 方法
function changeTemp() {
  temp.value += 10
}
function changeHeight() {
  height.value += 10
}

// 用watch实现
watch([temp, height], (val) => {
  // 从value中获取最新的temp值、height值
  let [newTemp, newHeight] = val
  if (newTemp >= 50 || newHeight >= 20) {
    console.log("发送请求")
  }
})

// 用watchEffect
watchEffect(() => {
  if (temp.value >= 50 || height.value >= 20) {
    console.log("发请求")
  }
})

四、标签的ref属性

ref用于给标签打标识。
1. 用在普通DOM标签上

<template>
  <div class="person">
    <h2 ref="title">hello</h2>
    <h2 ref="title2">hello again</h2>
    <h2>world</h2>
    <button @click="showTitle">获取所有hello</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref } from "vue"
// 似乎是解构赋值，这里接收的变量名需要和ref定义的一致
let title = ref()
let title2 = ref()
// let title1 = ref()  这样打印出title1是undefined
function showTitle() {
  console.log('ref', ref());
  console.log('title', title.value)
  console.log('title2', title2.value)
}
</script>

变量名需要的ref的名称一致，否则undefined
在这里插入图片描述
（这个ref打印出来也不知道是什么东西，看不懂，有点子神奇了）

2. 用在组件标签上
（竟然可以实现子组件给父组件传值）

父组件

<template>
  <Person ref="ren" />
  <button @click="showInfo">点击获取组件信息</button>
</template>

<script lang="ts" setup name="APP">
import Person from "./components/Person.vue"
import { ref } from "vue"
let ren = ref()
function showInfo() {
  console.log(ren.value.name)
  console.log(ren.value.age)
}
</script>

子组件

// 不引入也行，definexxx都是一些宏函数，会自动引入
import { defineExpose } from "vue"
let name = "tom"
let age = 18
// 使用defineExpose将组件中的数据交给外部
defineExpose({ name, age })

五、Propos

propos用于父组件向子组件传值

父组件的数据：

import Person from './components/Person.vue'
import { reactive } from 'vue';
import { Persons } from './type';
// 父组件
let persons = reactive<Persons>([
  { id: '12345', name: 'tom', age: 18 },
  { id: '123456', name: 'jerry', age: 18 },
  { id: '1234567', name: 'lucy', age: 18 }
])

1.子组件接收，接收并保存

<!--父组件-->
 <Person :list=persons />
<!--子组件-->
<script>
	// 只接收
	defineProps(['list'])
	console.log(list[0]); // 没保存，直接读取会提示“找不到list”
	
	// 接收并保存
	let x = defineProps(['list'])
	console.log(x.list[0]); // Proxy(Object) {id: '12345', name: 'tom', age: 18}
</script>

2. 限制接收的类型，限制必要性

<!--父组件-->
<Person :list=persons />
 <Person :list="5" />  <!-- 不是Person类型会报错 -->
 <Person />            <!-- 没有给子组件传递数据也会报错，解决方法：添加`?` -->
  
<!--子组件-->
<script>
	// 接收+限制类型，只能接收Persons类型的数据
	defineProps<{ list: Persons }>()
</script>

当添加一个?之后，则父组件可传可不传。不传递也不会报错

 defineProps<{ list?: Persons }>()

3. 子组件给默认值

import { withDefaults } from 'vue';
// 接收+限制类型+限制必要性+指定默认值
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{ id: '默认', name: '默认', age: 10 }]
})

六、生命周期

回顾vue2的生命周期，vue2(三) vue生命周期

Vue2的生命周期

创建阶段：beforeCreate、created

挂载阶段：beforeMount、mounted

更新阶段：beforeUpdate、updated

销毁阶段：beforeDestroy、destroyed

Vue3的生命周期

创建阶段：setup

挂载阶段：onBeforeMount、onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onUnmounted

常用：onMounted(挂载完毕)，onUpdated（更新完毕）,onBeforeUnmount(卸载之前)

解释一下这个创建阶段，用代码表示就是:

<script lang="ts" setup name="Person">
import { onBeforeMount,  onMounted,  } from 'vue';

console.log('创建');

onBeforeMount(() => {
  console.log('挂载之前');
})

onMounted(() => {
  console.log('挂载完毕');
})
</script>

在这里插入图片描述

七、自定义Hook

一直在说vue3是组合式API，每个功能的数据，方法都放在一起。目前在<script>标签里还是上边写一堆功能的数据，下面写一堆功能的方法，和vue2没啥区别了。
hook其实就是将各个功能的数据和方法单独封装到一个hook文件中。以后修改功能就直接去这个hook文件里改就好了。

  • 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。
  • 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。

现在页面上有两个功能：
在这里插入图片描述
src/hook/useSum.ts

import {  ref, computed } from 'vue'
export default function(){
// 功能一的数据
  let sum = ref(0)
// 功能一的函数
  let bigSum = computed(() => {
      return 10 * sum.value
  })
  function addSum() {
      sum.value += 1
   }
  return {sum,addSum,bigSum}
}

src/hook/useDog.ts

import { reactive, ref, computed } from 'vue'
import axios from 'axios';
export default function(){
// 功能二的数据
let dogList = reactive<string[]>([])
// 功能二的函数
async function getDog() {
  try {
    // 发请求
    let { data } = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
    // 维护数据
    dogList.push(data.message)
  } catch (error) {
    // 处理错误
    console.log(error.message)
  }
}
return {dogList,getDog}
}

组件内：
src/components/Person.vue

<template>
  <div class="person">
    <h2> 求和为{{ sum }},扩大十倍后{{ bigSum }}</h2>
    <button @click="addSum">sum+1</button>
    <br>
    <br>
    <img v-for="(u, index) in dogList" :key="index" :src="(u as string)">
    <br>
    <button @click="getDog">再来一只狗</button>
  </div>
</template>

<script lang="ts" setup name="Person">
// 1. 引入
import useDog from '../hook/useDog.ts'
import useSum from '../hook/useSum.ts'
// 2. 解构获取信息
const { dogList, getDog } = useDog()
const { sum, addSum, bigSum } = useSum()
</script>

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

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

相关文章

matlab之数据处理：滑动平均滤波算法与五点三次平滑算法

matlab之数据处理：滑动平均滤波算法与五点三次平滑算法

关注微♥公众号&#xff1a;“电击小子程高兴的MATLAB小屋”获取专属优惠 一.滑动平均滤波算法 算数平均滤波需要多次采样后才能得出一个有效值&#xff0c;如果被检测量变化较快&#xff0c;多次采样后才输出一次有效值&#xff0c;表现就是系统反应迟钝。将当前采样值与之前…
阅读更多...
LLM大模型开源微调宝典：LLaMA Factory，汇聚100+国内外实战教程

LLM大模型开源微调宝典：LLaMA Factory，汇聚100+国内外实战教程

LLaMA Factory是一个高效、易用、可扩展的开源全栈大模型微调框架&#xff0c;并得到Hugging Face、Avalon Labs、美团等多家国内外企业的关注或落地应用。 本次分享将从大模型高效训练的角度详细剖析LLaMA Factory的构建动机与组成模块&#xff0c;包括上百种大模型的全栈微调…
阅读更多...
19_Python中的上下文管理器

19_Python中的上下文管理器

Python中的上下文管理器 在Python中&#xff0c;上下文管理器&#xff08;Context Manager&#xff09;是一种用于资源管理的技术&#xff0c;它可以确保资源在使用后被正确释放&#xff0c;例如文件、网络连接或锁。 上下文管理器&#xff08;Context Manager&#xff09;是…
阅读更多...
每日一练：二叉树的直径

每日一练：二叉树的直径

543. 二叉树的直径 - 力扣&#xff08;LeetCode&#xff09; 一、题目要求 给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的 长度 由它们之…
阅读更多...
SpringBoot实现OAuth客户端

SpringBoot实现OAuth客户端

背景 5 月份的时候&#xff0c;我实践并整理了一篇博客&#xff1a;SpringBoot搭建OAuth2&#xff0c;该博客完成之后&#xff0c;本以为能对OAuth2的认证机制更加清晰&#xff0c;但我却觉得自己更“迷惘”了。 抛开我在项目中积累的浅薄经验不谈&#xff0c;单从在网…
阅读更多...
9月16日笔记

9月16日笔记

访问控制列表 访问控制列表(ACL)是访问控制项(Access Control Entry , ACE)的列表。安全对象的安全描述可以通过两种访问控制列表DACL和SACL进行。 DACL DACL 是由一条条的访问控制项(ACE)条目构成的&#xff0c;每条ACE定义了哪些用户或组对该对象拥有怎样的访问权限。DACL…
阅读更多...
进阶SpringBoot之集合 Redis

进阶SpringBoot之集合 Redis

&#xff08;在跑 Redis 测试之前&#xff0c;需要先安装 Redis&#xff0c;并开启 Redis 服务&#xff09; Spring Boot 项目添加依赖 NoSQL -> Spring Data Redis pom.xml 文件如下 <dependencies><dependency><groupId>org.springframework.boot<…
阅读更多...
实时数据的处理一致性

实时数据的处理一致性

实时数据一致性的定义以及面临的挑战‍‍‍‍‍ 数据一致性通常指的是数据在整个系统或多个系统中保持准确、可靠和同步的状态。在实时数据处理中&#xff0c;一致性包括但不限于数据的准确性、完整性、时效性和顺序性。 下图是典型的实时/流式数据处理的流程&#xff1a; 1、…
阅读更多...
佰朔资本：沪港通，深港通，港股通的区别与联系？

佰朔资本：沪港通，深港通，港股通的区别与联系？

沪港通&#xff0c;深港通&#xff0c;港股通的差异与联系&#xff1a; 1、沪港通是“沪港股票市场生意互联互通机制”的简称&#xff0c;包含“沪股通”和“沪港通下的港股通”。 &#xff08;1&#xff09;“沪股通”是指投资者托付香港经纪商&#xff0c;经由联交地址上海…
阅读更多...
kettle从入门到精通 第八十六课 ETL之kettle kettle调用https接口忽略SSL校验

kettle从入门到精通 第八十六课 ETL之kettle kettle调用https接口忽略SSL校验

1、在使用kettle调用接口的时候不可避免要调用http或者https接口&#xff0c;调用http接口kettle可以正常工作&#xff0c;但是遇到https接口的时候kettle就会提示证书有误&#xff0c;无法正常调用接口&#xff0c;今天咱们一起通过自研插件的方式来解决这个问题。自研插件需要…
阅读更多...
启明云端WT32C3-S2模组，乐鑫ESP32-C3芯片开发应用，设备联网通信方案

启明云端WT32C3-S2模组，乐鑫ESP32-C3芯片开发应用，设备联网通信方案

随着科技的飞速发展&#xff0c;我们正步入一个全新的时代——物联网时代。在这个时代&#xff0c;每一个设备都不再是孤立的个体&#xff0c;而是通过无线网络相互连接、相互沟通的智能节点。 想象一下&#xff0c;当你走进家门&#xff0c;灯光自动亮起&#xff0c;空调调整…
阅读更多...
认识NDK

认识NDK

什么是NDK&#xff08;Native Development Kit&#xff09; The Android NDK is a toolset that lets you implement parts of your app in native code, using languages such as C and C. &emdp; Android NDK 是一个工具集&#xff0c;可让您使用 C 和 C 等语言以原生代…
阅读更多...
CANdela/Diva系列8--如何生成0x27服务解锁的DLL

CANdela/Diva系列8--如何生成0x27服务解锁的DLL

本系列的上一篇文章中&#xff0c;我们介绍了如何在CDD文件中去根据客户需求来配置诊断服务&#xff0c;其实每个诊断服务的配置方式都是大同小异&#xff0c;但是0x27服务略有不同&#xff0c;为了能够让CDD文件根据ECU返回的种子去自动计算出密钥&#xff0c;需要添加一个解锁…
阅读更多...
流域碳中和技术

流域碳中和技术

随着全球气候变化的加剧&#xff0c;碳中和已成为实现可持续发展的重要目标之一。碳中和不仅仅是能源和工业领域的调整&#xff0c;它涉及整个生态系统的转型与再生。在这一过程中&#xff0c;流域的生态系统作为水、土、生物多样性等自然资源的集成体&#xff0c;扮演着至关重…
阅读更多...
解密.baxia勒索病毒：.baxia勒索病毒的攻击手法及防护建议

解密.baxia勒索病毒：.baxia勒索病毒的攻击手法及防护建议

导言 在当前网络安全形势日益严峻的背景下&#xff0c;勒索软件的威胁正不断升级&#xff0c;其中.baxia勒索病毒尤为突出。作为一种新型恶意软件&#xff0c;.baxia病毒通过加密用户的文件并要求支付赎金来获取解密密钥&#xff0c;对个人和企业的安全构成了严重威胁。随着其…
阅读更多...
【LLM多模态】视频理解模型Cogvlm-video和MVBench评测基准

【LLM多模态】视频理解模型Cogvlm-video和MVBench评测基准

note Cogvlm-video模型通过视频抽帧&#xff08;24帧&#xff0c;每帧大小为224 x 224&#xff09;后经过ViT进行图像编码&#xff08;ViT中添加了2x2的卷积核更好的压缩视觉信息&#xff09;&#xff0c;使用adapter模块更好的将视觉特征和文本特征对齐&#xff0c;得到的图像…
阅读更多...
基于WebServer的工业数据采集系统

基于WebServer的工业数据采集系统

一、项目框架及流程 二、http简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写&#xff0c;是用于Web Browser&#xff08;浏览器&#xff09;到Web Server&#xff08;服务器&#xff09;进行数据交互的传输协议。 HTTP是应用层协…
阅读更多...
poi生成的ppt，powerPoint打开提示内容错误解决方案

poi生成的ppt，powerPoint打开提示内容错误解决方案

poi生成的ppt&#xff0c;powerPoint打开提示内容错误解决方案 最近做了ppt的生成&#xff0c;使用poi制作ppt&#xff0c;出现一个问题。微软的powerPoint打不开&#xff0c;提示错误信息 通过xml对比工具发现只需要删除幻灯片的某些标签即可解决。 用的是XML Notepand 分…
阅读更多...
ai写论文哪个平台好？7款AI写论文软件帮你撰写论文

ai写论文哪个平台好？7款AI写论文软件帮你撰写论文

在当今学术研究和写作领域&#xff0c;AI论文写作工具的出现极大地提高了写作效率和质量。这些工具不仅能够帮助研究人员快速生成论文草稿&#xff0c;还能进行内容优化、查重和排版等操作。以下是七款推荐的AI写论文软件&#xff0c;其中特别推荐千笔-AIPassPaper。 一、千笔…
阅读更多...
Java集合（Map篇）

Java集合（Map篇）

一.Map a.使用Map i.键值&#xff08;key-value&#xff09;映射表的数据结构&#xff0c;能高效通过key快速查找value&#xff08;元素&#xff09;。 ii.Map是一个接口&#xff0c;最常用的实现类是HashMap。 iii.重复放入k-v不会有问题&#xff0c;但是一个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023