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'
//data
let sum = ref(0)
//function
function 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'
//data
let sum = ref(0)
//function
function Add() {
sum.value += 1
}
//watch
const stopWatch = watch(sum, (newValue, oldValue) => { //监视sum
console.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'
//data
let person = ref({
name: 'Tom',
age: 18
})
//function
function changeName() {
person.value.name = 'Jack'
}
function changeAge() {
person.value.age += 1
}
function changePerson() {
person.value = {
name:'Anna',
age: 19
}
}
//watch
watch(
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'
//data
let person = reactive({
name: 'Tom',
age: 18
})
//function
function 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'
// data
let person = reactive({
name: 'Tom',
age: 18,
hobby:{
h1:'Swimming',
h2:'Running'
}
})
// function
function 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'
// data
let person = reactive({
name: 'Tom',
age: 18,
hobby:{
h1:'Swimming',
h2:'Running'
}
})
// function
function 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'
// data
let x = ref(0)
let y = ref(0)
// function
function 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>
watch 对比watchEffect
1. 都能监听响应式数据的变化,不同的是监听数据变化的方式不同
2. watch:要明确指出监视的数据
3. watchEffect:不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性)