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

文章目录

  • 4、watch监视
    • [4.1 前言](#4.1 前言)
    • [4.2 情况一](#4.2 情况一)
    • [4.3 情况二](#4.3 情况二)

4、watch监视

4.1 前言

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

4.2 情况一

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

js 复制代码
<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定义的对象类型数据,实现代码:

js 复制代码
<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

js 复制代码
watch(person, (newValue, oldValue)=>{
    console.log("✅person变化了:",newValue, oldValue)
},{deep:true})

实现效果:

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

js 复制代码
watch(person, (newValue, oldValue)=>{
    console.log("✅person变化了:",newValue, oldValue)
},{deep:true, immediate:true})

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

相关推荐
LinDaiuuj1 小时前
最新的前端技术和趋势(2025)
前端
paopaokaka_luck1 小时前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts
一只小风华~1 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟2 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
仰望星空的凡人2 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus3 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉3 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A3 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6663 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus4 小时前
React之react-dom中的dom-server与dom-client
前端·react.js