Vue3---基础5（computed和watch、watchEffect）
computed 计算属性
代码示例
<template>
<div class="person">
<div>姓：<input type="text" v-model="firstName"></div>
<div>名：<input type="text" v-model="lastName"></div>
<button @click="hChangeName">修改名字</button>
<div>全名：{{ fullName }}</div>
</div>
</template>
<script lang="ts">
// 引入
import { ref, computed } from 'vue';
</script>
<script lang="ts" setup>
// 定义的数据
let firstName = ref('张')
let lastName = ref('杰')
// 此为 只读 的计算属性
// let fullName = computed(() => {
// return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
// })
// 此为 可读可写 的计算属性
let fullName = computed({
get(){
return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
},
set(val){
// console.log('val', val);
const [str1, str2] = val.split('-')
firstName.value = str1
lastName.value = str2
}
})
function hChangeName(){
fullName.value = 'Jason-Zhang'
}
</script>watch 监听
作用：监视数据的变化（ 和Vue2中的watch作用一致 ）
特点：Vue3 中的 watch 只能监视一下四种数据
1. ref 定义的数据
2. reactive 定义的数据
3. 函数返回一个值（getter函数）
4. 一个包含上述内容的数组
我们在 Vue3 中使用 watch 的时候，通常会遇到以下几种情况
情况一 ref定义的基本类型
监视 ref 定义的 基本类型数据：直接写数据名即可，监视的是其 value 值的改变
<template>
<div class="person">
<h1>情况一：监视【ref】定义的【基本类型】数据</h1>
<h2>当前求和为: {{ sum }}</h2>
<button @click="hChangeSum">+1</button>
</div>
</template>
<script lang="ts" setup name="text2">
import { ref,watch} from 'vue';
// 数据
let sum = ref(0)
// 方法
function hChangeSum(){
sum.value += 1
}
// 监视 情况一：监视【ref】定义的【基本类型】数据
// watch(监视对象, 回调函数)
const stopWatch = watch(sum, (newVal, oldVal) => {
console.log("sum值变化",newVal, oldVal);
// 在特定情况下停止监视
if(newVal >= 10) {
stopWatch()
}
})
</script>情况二 ref定义的对象类型
监视 ref 定义的 对象类型 数据：直接写数据名，监视的是对象的 地址值，若想监视对象内部的数据，要手动开启深度监听
注意：
若修改的是 ref 定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象
若修改整个 ref 定义的对象，newValue 是新值，oldValue 是旧值，因为不是同一个对象了
<template>
<div class="person">
<h1>情况二：监视【ref】定义的【对象类型】数据</h1>
<h2>姓名：{{ person.name }}</h2>
<h2>年龄：{{ person.age }}</h2>
<button @click="hChangeName">修改名字</button>
<button @click="hChangeAge">修改年龄</button>
<button @click="hChangePerson">修改整个人</button>
</div>
</template>
<script lang="ts" setup name="text2">
import { ref,watch} from 'vue';
// 二
// 数据
let person = ref({
name:'张杰',
age:22,
})
// 方法
function hChangeName(){
person.value.name += '~'
}
function hChangeAge(){
person.value.age += 1
}
function hChangePerson(){
person.value = {name: 'Jason', age: 27}
}
/*
监视 情况二-1：监视【ref】定义的【基本类型】数据，想监视对象内部属性的变化，需要手动开启（深度监听）
watch的第一个参数是：被监视的对象
watch的第二个参数是：监视的回调
watch的第三个参数是：配置对象（deep 深度监听, immediate 立即监听，等等）
*/
watch(person, (newVal, oldVal) =>{
console.log("person值变化",newVal, oldVal);
},{deep:true, immediate:true})
</script>情况三 reactive定义的对象类型
监视 reactive 定义的【对象类型】数据，且默认开启了深度监听
<template>
<div class="person">
<h1>情况三：监视【ref】定义的【对象类型】数据</h1>
<h2>姓名：{{ person.name }}</h2>
<h2>年龄：{{ person.age }}</h2>
<button @click="hChangeName">修改名字</button>
<button @click="hChangeAge">修改年龄</button>
<button @click="hChangePerson">修改整个人</button>
</div>
</template>
<script lang="ts" setup name="text2">
import { reactive,watch} from 'vue';
// 三
// 数据
let person = reactive({
name:'张杰',
age:22,
})
// 方法
function hChangeName(){
person.name += '~'
}
function hChangeAge(){
person.age += 1
}
function hChangePerson(){
Object.assign(person, {name:'Jason Zhang', age: 27})
}
// 监视 情况三：监视【ref】定义的【对象类型】数据 默认开启深度监听
// 可以通过 deep:false 去关闭
watch(person, (newVal, oldVal) =>{
console.log("person值变化",newVal, oldVal);
})
</script>情况四 ref或reactive定义的对象类型中某个属性
监视 ref 或 reactive 定义的【对象类型】数据中的某个属性
注意点：
1. 若该属性值不是【对象类型】，需要写成函数形式；
2. 若该属性值依然是【对象类型】，可直接编，也可写成函数，建议写成函数；
<template>
<div class="person">
<h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
<h2>姓名：{{ person.name }}</h2>
<h2>年龄：{{ person.age }}</h2>
<h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
<button @click="hChangeName">修改名字</button>
<button @click="hChangeAge">修改年龄</button>
<button @click="hChangeCar1">修改第一台车</button>
<button @click="hChangeCar2">修改第二台车</button>
<button @click="hChangeAllCar">修改整个车</button>
</div>
</template>
<script lang="ts" setup name="text2">
import { reactive,watch} from 'vue';
// 四
// 数据
let person = reactive({
name:'张杰',
age:22,
car:{
c1:'小米su7',
c2:'保时捷',
}
})
// 方法
function hChangeName(){
person.name += '~'
}
function hChangeAge(){
person.age += 1
}
function hChangeCar1(){
person.car.c1 = '小米SU35'
}
function hChangeCar2(){
person.car.c2 = '劳斯莱斯'
}
function hChangeAllCar(){
person.car = {c1: '问界M7', c2: '问界M9', }
}
// 监视 情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性,要写成函数式
watch(()=>person.name, (newVal, oldVal) =>{
console.log("person.name值变化",newVal, oldVal);
})
/*
如果直接写，整体car的改变无法监听到
如果写成函数式,无法检测对象内的变化
此时加上 deep:true 就可以都检测到
*/
watch(()=>person.car, (newVal, oldVal) =>{
console.log("person.name值变化",newVal, oldVal);
},{deep:true})
</script>
情况五 监视上述多个数据
// 监视 情况五：监视上述多个数据
watch([()=>person.name,()=>person.car.c1], (newVal, oldVal) =>{
console.log("person.name值变化",newVal, oldVal);
})watchEffect 监听
官网：立即运行一个函数，同时响应式的追踪其依赖，并在依赖更改时重新执行该函数
watch 对比 watchEffect
1. 都能监听响应式数据的变化，不同的是监听数据变化的方法不同
2. watch：要明确指出监视的数据
3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，就监视哪些属性）
<template>
<div class="person">
<h2>当水温达到60度时，或水位到达80cm时，给服务器发请求</h2>
<h2>当前水温：{{ temp }}℃</h2>
<h2>当前水位：{{ height }}cm</h2>
<button @click="hChangeTemp">水温+10</button>
<button @click="hChangeHeight">水位+10</button>
</div>
</template>
<script lang="ts" setup name="text2">
import { ref,watch, watchEffect} from 'vue';
// 数据
let temp = ref(10)
let height = ref(5)
// 方法
function hChangeTemp(){
temp.value += 10
}
function hChangeHeight(){
height.value += 10
}
// 监视 ------ watch 实现
// watch([temp,height], (value) =>{
// // 从value 中获取最新的水温和水位
// let [newTemp, newheight] = value
// // 逻辑
// if(newTemp >=60 || newheight >= 80) {
// console.log('发请求');
// }
// })
// 监视 ------ watchEffect 实现
watchEffect(() => {
// 逻辑
if(temp.value >=60 || height.value >= 80) {
console.log('发请求');
}
})
</script>
原文地址：https://blog.csdn.net/Anorry/article/details/137653957
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！