Vue3---基础5（computed和watch、watchEffect）

本文主要是介绍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 = str1lastName.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>

 

这篇关于Vue3---基础5（computed和watch、watchEffect）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---