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

相关推荐
herogus丶9 分钟前
【Chrome】‘Good助手‘ 扩展程序使用介绍
前端·chrome
独立开阀者_FwtCoder13 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者15 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder16 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder16 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806931 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
rui锐rui1 小时前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥1 小时前
JavaScript之数组方法详解
javascript