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

相关推荐
daols883 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue