第八篇：监视`ref`定义的【基本类型】数据

【watch】

• 作用：监视数据的变化（和Vue2中的watch作用一致）

• 特点：Vue3中的watch只能监视以下四种数据：

1. ref定义的数据。

2. reactive定义的数据。

3. 函数返回一个值（getter函数）。

4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到以下几种情况 ，

在一定情况下，停止监控：stopWatch

watch(第一个参数，第二个参数） // 第一个参数是监控谁 ，第二个参数是回调函数

<template>
  <div class="person">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{
  
  {sum}}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }
  // 监视，情况一：监视【ref】定义的【基本类型】数据
  const stopWatch = watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
    if(newValue >= 10){
      stopWatch()
    }
  })
</script>

原文地址：https://blog.csdn.net/liuxiaojun828/article/details/145268283

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！