Vite4+Vue3之watch侦听器的使用

Etc.End

已于 2023-02-28 14:48:32 修改

阅读量459

点赞数 1

分类专栏： vue3 文章标签： typescript 前端 vue.js 开发语言

于 2023-02-28 14:47:32 首次发布

本文链接：https://blog.csdn.net/qq_19991931/article/details/129260061

版权

vue3 专栏收录该内容

11 篇文章 7 订阅

订阅专栏

本文介绍了Vue3中使用watch选项进行数据监听的方法，包括对Ref和Reactive对象的监听，以及深度监听和监听单一值的配置。示例代码展示了如何在值变化时执行回调函数，用于处理副作用，如更新DOM或基于异步结果修改状态。

摘要由CSDN通过智能技术生成

计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。

在选项式 API 中，我们可以使用 watch 选项在每次响应式属性发生变化时触发一个函数。（这是来自Vue3官网的描述）

在使用前面我们先了解一下watch侦听器如何使用。

watch('侦听数据源', ('更新后的值', '更新前的值'), '配置项')

第一个参数：为需要监听的数据源。

第二个参数：就是在我们监听的数据源发生变化后的回调函数(newVal,oldVal)

第三个参数：为一个options配置项

{ 
   immediate:true, // 是否立即调用一次 
   deep:true, // 是否开启深度监听 
   flush: 'pre' // 控制回调函数的执行时机。它可设置为 pre、post 或 sync。
}

壹、监听Ref 😄😄😄😄

<template>
  <div>
    <el-button @click="changeData">更改值</el-button>
  </div>
</template>

<script lang="ts">

export default defineComponent({
  setup() {

    let name = ref<string>('Etc.End')

    let info = ref<{
      name: string
      age: number
      addr: string
      sex: string
      more?: object
    }>({
      name: 'Etc.End',
      age: 28,
      addr: '云南省昆明市',
      sex: '男',
      more: {
        contact: {
          phone: '1388888****'
        }
      }
    })

    // 监听单一
    watch(name, (newVal, oldVal) => {
      console.log('新的值----', newVal);
      console.log('旧的值----', oldVal);
    })

    // 监听单一
    watch(info, (newVal, oldVal) => {
      console.log('新的值----', newVal);
      console.log('旧的值----', oldVal);
    },{
      deep:true // 深度监听
    })

    // 同时监听多个
    watch([name, info], (newVal, oldVal) => {
      console.log('新的值----', newVal);
      console.log('旧的值----', oldVal);
    })

    const changeData = () => {
      name.value = 'TigerSong'
      info.value.more = {
        contact: {
          phone: '183****85**'
        }
      }
    }

    return {
      changeData
    }
  }
})
</script>

贰、监听Reactive以及监听Reactive的单一值 😆😆😆😆

<template>
  <div>
    <el-button @click="changeData">更改值</el-button>
  </div>
</template>

<script lang="ts">

export default defineComponent({
  setup() {

    let info = reactive<{
      name: string
      more?: object
    }>({
      name: 'Etc.End',
      more: {
        contact: {
          phone: '1388888****'
        }
      }
    })

    watch(info, (newVal, oldVal) => {
      console.log('新的值----', newVal);
      console.log('旧的值----', oldVal);
    })

    // 监听指定的单一值 比如 name 这个时候点击changeData是不会触发这个函数的
    // 只有在name发生变化时才会触发
    watch(() => info.name, (newVal, oldVal) => {
      console.log('新的值----', newVal);
      console.log('旧的值----', oldVal);
    })

    const changeData = () => {
      info.more = {
        contact: {
          phone: '183****85**'
        }
      }
    }

    return {
      changeData
    }
  }
})
</script>

这里只是一个简单的demo。纯属学习记录。我是Etc.End，如果文章对你有帮助，记得帮我点个赞😄 😆 😊 😃 😏