Vue3.0教程005：watch监视ref定义的【基本类型】数据和【对象类型】数据

4、watch监视

4.1 前言

• 作用：监视数据的变化（和vue2中的watch作用一致）
• 特点：Vue3中的watch只能监视以下四种数据：
  • ref定义的数据。
  • reactive定义的数据。
  • 函数返回一个值。
  • 一个包含上述内容的数组。

4.2 情况一

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

<template>
    <div>
        <el-card style="max-width: 480px">
            <template #header>
                <div class="card-header">
                    <span>监视【ref】定义的【基本类型】数据</span>
                </div>
            </template>
            <h2>当前求和为：{{sum}}</h2>
            <el-button type="success" @click="changeSum">
                点我+1
            </el-button>
            <template #footer>
                监视属性watch：<el-tag type="info">情况一</el-tag>
            </template>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import {ref, watch} from 'vue'

let sum = ref(0)

function changeSum(){
    sum.value += 1;
}

// 监视 watch(谁?, 回调函数)
watch(sum, (newValue, oldValue)=>{
    console.log('sum变化了', newValue, oldValue);
})
</script>

<style scoped>

</style>

注意：

• 监视ref数据的时候，不需要写value
  • watch(sum, (newValue, oldValue))

4.3 情况二

监视ref定义的对象类型数据，实现代码：

<template>
    <div>
        <el-row :gutter="4">
            <el-col :span="12">
                <el-card style="max-width: 480px">
                    <template #header>
                        <div class="card-header">
                            <span>监视【ref】定义的【基本类型】数据</span>
                        </div>
                    </template>
                    <h2>当前求和为：{{sum}}</h2>
                    <el-button size="small" type="success" @click="changeSum">
                        点我+1
                    </el-button>
                    <template #footer>
                        监视属性watch：<el-tag type="info">情况一</el-tag>
                    </template>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="max-width: 480px">
                    <template #header>
                        <div class="card-header">
                            <span>监视【ref】定义的【对象类型】数据</span>
                        </div>
                    </template>
                    <h2>姓名：{{person.name}}</h2>
                    <h2>年龄：{{person.age}}</h2>
                    <el-button size="small" type="primary" @click="changeName">
                        修改名字
                    </el-button>
                    <el-button size="small" type="success" @click="changeAge">
                        修改年龄
                    </el-button>
                    <el-button size="small" type="danger" @click="changePerson">
                        修改全部
                    </el-button>
                    <template #footer>
                        监视属性watch：<el-tag type="info">情况二</el-tag>
                    </template>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import {ref, watch} from 'vue'

let sum = ref(0)

let person = ref({
    name: '张三',
    age: 18
})

function changeSum(){
    sum.value += 1;
}

function changeName(){
    person.value.name += '~'
}

function changeAge(){
    person.value.age += 1
}

function changePerson(){
    person.value = {name: '李四', age: 25}
}

// 监视 watch(谁?, 回调函数)
watch(sum, (newValue, oldValue)=>{
    console.log('✅sum变化了', newValue, oldValue)
})

watch(person, (newValue, oldValue)=>{
    console.log("✅person变化了：",newValue, oldValue)
})
</script>

<style scoped>

</style>

实现效果，这里监视的是整个对象，只有点击【修改全部】的时候，才能触发监视器：

如果想监视对象的某一个属性【name/age】，则需要开启深度监视，修改监视代码，添加deep:true：

watch(person, (newValue, oldValue)=>{
    console.log("✅person变化了：",newValue, oldValue)
},{deep:true})

实现效果：

如果开启立即监视，即刷新页面的时候，当数据没有改变的时候就监视，实现代码如下：

watch(person, (newValue, oldValue)=>{
    console.log("✅person变化了：",newValue, oldValue)
},{deep:true, immediate:true})

打印结果如下，当刷新浏览器，页面数据没有变化，但仍会默认监视，但是此时旧的值是undefined：