watch watchEffect Vue3

本文主要是介绍watch watchEffect Vue3，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

watch的应用场景

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

<template><div class="person"><h2>sum: {{ sum }}</h2><button @click="Add">+1</button></div>
</template><script lang="ts" setup name = "Person">import { ref, watch } from 'vue'//datalet sum = ref(0)//functionfunction Add() {sum.value += 1}//watch watch(sum, (newValue, oldValue) => {console.log(newValue, oldValue)})</script><style scoped>/* 可以添加样式 */
</style>

添加停止监视：

<template><div class="person"><h2>sum: {{ sum }}</h2><button @click="Add">+1</button></div>
</template><script lang="ts" setup name = "Person">import { ref, watch } from 'vue'//datalet sum = ref(0)//functionfunction Add() {sum.value += 1}//watch const stopWatch = watch(sum, (newValue, oldValue) => { //监视sumconsole.log(newValue, oldValue)if (newValue >= 10){stopWatch() //需要前面定义 ‘ const stopWatch = ’}})</script><style scoped>/* 可以添加样式 */
</style>

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

watch监视的是对象的地址值，即只有执行changePerson更改对象地址值后，才被监视到

若想监视对象内部属性的变化，需要手动开启深度监视

<template><div class="person"><h2>Name: {{ person.name }}</h2><h2>Age: {{ person.age }}</h2><button @click="changeName">Change Name</button><button @click="changeAge">Change Age</button><button @click="changePerson">Change Person</button></div>
</template><script lang="ts" setup name = "Person">import { ref, watch } from 'vue'//datalet person = ref({name: 'Tom',age: 18})//functionfunction changeName() {person.value.name = 'Jack'}function changeAge() {person.value.age += 1}function changePerson() {person.value = {name:'Anna',age: 19}}//watchwatch(person,(newValue, oldValue)=>{console.log(newValue, oldValue)},{deep: true} // {}这是一个配置对象，执行了：手动开启深度监视)</script><style scoped>/* 可以添加样式 */
</style>

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

<template><div class="person"><h2>Name: {{ person.name }}</h2><h2>Age: {{ person.age }}</h2><button @click="changeName">Change Name</button><button @click="changeAge">Change Age</button><button @click="changePerson">Change Person</button></div>
</template><script lang="ts" setup name = "Person">import { reactive, watch } from 'vue'//datalet person = reactive({name: 'Tom',age: 18})//functionfunction changeName() {person.name = 'Jack'}function changeAge() {person.age += 1}function changePerson() {Object.assign (person,{name: 'Anna',age: 19})}//watch,监视【reactive】定义的【对象类型】数据时默认开启深度监视watch(person,(newValue, oldValue) => {console.log(newValue, oldValue)})</script><style scoped>/* 可以添加样式 */
</style>

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

<template><div class="person"><h2>Name: {{ person.name }}</h2><h2>Age: {{ person.age }}</h2><h2>Hobby: {{ person.hobby.h1 }}, {{ person.hobby.h2 }}</h2><button @click="changeName">Change Name</button><button @click="changeAge">Change Age</button><button @click="changeH1">Change Hobby1</button><button @click="changeAllHobby">Change All Hobby</button></div>
</template><script lang="ts" setup name = "Person">import { reactive, watch } from 'vue'// datalet person = reactive({name: 'Tom',age: 18,hobby:{h1:'Swimming',h2:'Running'}})// functionfunction changeName() {person.name += '~'}function changeAge() {person.age += 1}function changeH1() {person.hobby.h1 = 'Boxing'}function changeAllHobby() {// 这里不用object.assign，因为改的不是reactive对象person本身，改的是person对象里的Hobby对象person.hobby = {h1: 'Dancing',h2: 'Singing'}}// watch，监视Name属性watch(()=>person.name, // 监视person.name，但不符合watch语法，只能写这个函数/ref/reactive/以上的数组(newValue, oldValue)=>{console.log(newValue, oldValue)})// watch，监视hobby对象watch(()=>person.hobby, //监视地址(newValue, oldValue)=>{console.log(newValue, oldValue)},{deep:true} // 同时监视其中的属性)</script><style scoped>/* 可以添加样式 */
</style>

5. 监视多个属性——使用数组

<template><div class="person"><h2>Name: {{ person.name }}</h2><h2>Age: {{ person.age }}</h2><h2>Hobby: {{ person.hobby.h1 }}, {{ person.hobby.h2 }}</h2><button @click="changeName">Change Name</button><button @click="changeAge">Change Age</button><button @click="changeH1">Change Hobby1</button><button @click="changeAllHobby">Change All Hobby</button></div>
</template><script lang="ts" setup name = "Person">import { reactive, watch } from 'vue'// datalet person = reactive({name: 'Tom',age: 18,hobby:{h1:'Swimming',h2:'Running'}})// functionfunction changeName() {person.name += '~'}function changeAge() {person.age += 1}function changeH1() {person.hobby.h1 = 'Boxing'}function changeAllHobby() {// 这里不用object.assign，因为改的不是reactive对象person本身，改的是person对象里的Hobby对象person.hobby = {h1: 'Dancing',h2: 'Singing'}}// watch，监视watch([()=>person.name, ()=>person.hobby.h1],(newValue, oldValue)=>{console.log(newValue, oldValue)},{deep:true})</script><style scoped>/* 可以添加样式 */
</style>

WatchEffect应用场景

官网:立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

<template><div class="person"><h2>x: {{ x }}</h2><h2>y: {{ y }}</h2><button @click="plusX">x+1</button><button @click="plusY">y+1</button></div>
</template><script lang="ts" setup name = "Person">import { ref, watchEffect } from 'vue'// datalet x = ref(0)let y = ref(0)// functionfunction plusX() {x.value += 1}function plusY() {y.value += 1}// watch，监视watchEffect(()=>{if(x.value >= 3 || y.value >= 3) {console.log('message')}})</script><style scoped>/* 可以添加样式 */
</style>