04-vue3侦听器

news2024/11/21 1:27:46

文章目录

- 1.watch
- - 1.侦听数据源类型
  - 2.demo
- 2.watchEffect函数
- 3.watch vs. watchEffect

1.watch

计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。

在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数.

与Vue2.x中watch配置功能一致

1.侦听数据源类型

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组.

两个小“坑”：
- 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
- 监视reactive定义的响应式数据中某个属性时：deep配置有效。

2.demo

<template>
  <div>
    <h3>watch和watchEffect</h3>
   
  <input type="text" v-model="bir" placeHolder="请输入出生年月"  >
  <p>当前的周岁年龄为:{{age}}</p>
  <input type="text" v-model="firstName" >+
  <input type="text" v-model="lastName">=
  <input type="text" v-model="fullName">

  <input type="text" v-model="people.name">
  <input type="text" v-model="people.age">
  <input type="text" v-model="people.job.salary">
  </div>
</template>
<script setup>
import {ref,watch,reactive,watchEffect} from "vue"
const bir=ref("2018/5/20");
const age=ref(0);

//1.watch监听单个ref数据
watch(bir,(newValue,oldValue)=>{
  console.log("监听到了txt的变化")
  console.log(newValue,oldValue);
  age.value=new Date().getFullYear()-new Date(bir.value).getFullYear();
})
//2.监视多个ref定义的响应式数据
const firstName=ref("张");
const lastName=ref("三");
const fullName=ref("张三")
/**
 watch([firstName,lastName],(newValue,oldValue)=>{
   console.log(newValue,oldValue)
   //newValue:[第一个监听数据的最新值,第二个监听数据的最新值,....]
   //oldValue:[第一个监听数据的上一次操作的值,第二个监听数据的上一次操作的值,....]
   fullName.value=newValue[0]+newValue[1];
 })
 **/
watchEffect(()=>{
  fullName.value=firstName.value+lastName.value
})
//3.监视reactive定义的响应式数据
// 若watch监视的是reactive定义的响应式数据，则无法正确获得        oldValue！！
// 若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
const people=reactive({
  name:'张三',
  age:13,
  job:{
    address:'中山西路',
    salary:"40k"
  }
})
/**
 watch(people,(newValue,oldValue)=>{
   console.log("监听people对象");
   console.log(newValue,oldValue);
 },{deep:false})//此处的deep配置不再奏效
**/
//4.监视reactive定义的响应式数据中的某个属性

watch(()=>people.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{deep:true}) // 特殊情况.此处由于监视的是reactive定义的对象中的某个属性，所以deep配置有效

//5.监视reactive定义的响应式数据中的某些属性
//这时newValue,oldValue又可以正常使用了
watch([()=>people.name,()=>people.age],(newValue,oldValue)=>{
	console.log('person的name变化了',newValue,oldValue)
},{immediate:true,deep:true})
</script>

2.watchEffect函数

watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed：
- 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
- 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})