Vue3的watch侦听器以及与Vue2的watch的侦听器区别

一、Vue3的watch侦听器:

1、基础用法侦听单个数据

  1. 导入watch函数
  2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
javascript 复制代码
<template>
  <button @click="add">
    {{ count }}
  </button>
<template>

<script>
    //导入watch
    import { ref, watch } from 'vue'
    const count = ref(0)
    const add = () => count.value++
    //调用watch侦听变化
    //count:ref参数不需要加.value
    watch(count,(newVla,oldVal) => {
    console.log('旧值为',oldVal,'新值为',newVal)
})
<script>

2、侦听多个数据

javascript 复制代码
<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('cp')
  // 2. 调用watch 侦听变化
  watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
    console.log(`count或者name变化了,[newCount, newName],[oldCount,oldName])
  })
</script>

3、立即监听 (immediate)

在侦听器创建时立即发出回调,响应式数据变化之后继续执行回调

javascript 复制代码
<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)
  },{
    immediate: true
  }) 
</script>

4、深度监听

通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性 不会 触发回调执行,需要开启deep

javascript 复制代码
<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  // 这里有两个属性
  const state = ref({ count: 0, age: 18 })
  // 2. 监听对象state 并开启deep
  watch(state, ()=>{
    console.log('数据变化了')
  },{deep:true})
  const changeStateByCount = ()=>{
    // 此时修改可以触发回调
    state.value.count++
  }
</script>

5、精确监听

开启deep的问题: 它会递归地处理处理所有的值,无论哪个属性被修改都会触发watch回调,这可能会导致不必要的浪费。

javascript 复制代码
  watch(()=>state.value.name, (newVal, oldVal) => {
    console.log('name变化了')
  })

二、区别

1、首先他们都可以监听数据对象和计算属性的变化,Vue3的还可以监听ref和reactive的变化。

2、vue2可以监听单个属性或深度监听整个对象,vue3默认只监听单个属性的变化,不在支持深度监听,如果需要深度监听需要使用deep来实现。

3、vue3中的回调函数可以接受到变化的新值和旧值作为参数,方便进行比较处理。

相关推荐
苦夏木禾2 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉11 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。17 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)37 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心1 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟1 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html