vue3怎么数据监听watch/watchEffect

目录
  • watch()函数
  • watchEffect()函数
  • watch 与 watchEffect之间的联系与区别

我们都知道监听器的作用是在每次响应式状态发生变化时触发,在组合式 API 中,我们可以使用 watch()函数watchEffect()函数,

当你更改了响应式状态,它可能会同时触发 Vue 组件更新和侦听器回调。

默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

那么,我们来看一下,怎么才能好好的使用他们呢?他们之间又有什么区别呢?

watch()函数

watch 需要侦听特定的数据源,比如侦听一个 ref,watch 的第一个参数可以是不同形式的“数据源”:它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组,如下:

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

const obj = reactive({ count: 0 })
//传入一个响应式对象
watch(obj, (newValue, oldValue) => {
  // 在嵌套的属性变更时触发
  // 注意:`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象!
})

obj.count++

watch(
  () => obj.count,
  (newValue, oldValue) => {
    // 注意:`newValue` 此处和 `oldValue` 是相等的
    // *除非* obj.count 被整个替换了
  },
  { deep: true }
)

注意,你不能直接侦听响应式对象的属性值

const obj = reactive({ count: 0 })

// 错误,因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

这里需要用一个返回该属性的 getter 函数

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

watch 默认是懒执行的:仅当数据源变化时,才会执行回调。但在某些场景中,我们希望在创建侦听器时,立即执行一遍回调。举例来说,我们想请求一些初始数据,然后在相关状态更改时重新请求数据。

我们可以通过传入 immediate: true 选项来强制侦听器的回调立即执行:

watch(source, (newValue, oldValue) => {
  // 立即执行,且当 `source` 改变时再次执行
}, { immediate: true })

watchEffect()函数

watchEffect() 允许我们自动跟踪回调的响应式依赖。

const todoId = ref(1)
const data = ref(null)

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

这个例子中,回调会立即执行,不需要指定 immediate: true。在执行期间,它会自动追踪 todoId.value 作为依赖(和计算属性类似)。每当 todoId.value 变化时,回调会再次执行。有了 watchEffect(),我们不再需要明确传递 todoId 作为源值

watchEffect() 适合有多个依赖项的侦听器对于这种只有一个依赖项的例子来说,好处相对较小。此外,如果你需要侦听一个嵌套数据结构中的几个属性,watchEffect() 可能会比深度侦听器更有效,因为它将只跟踪回调中被使用到的属性,而不是递归地跟踪所有的属性。

如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: ‘post’ 选项,
后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect():

import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* 在 Vue 更新后执行 */
})

watch 与 watchEffect之间的联系与区别

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式

watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。

watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。适合有多个依赖项的侦听器

到此这篇关于vue3如何进行数据监听watch/watchEffect的文章就介绍到这了,更多相关vue3数据监听watch/watchEffect内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3 中 watch 与 watchEffect 区别及用法小结

    目录 响应式依赖收集 Watch WatchEffect 什么时候用什么? 大部分时候用 watch 显式的指定依赖以避免不必要的重复触发,也避免在后续代码修改或重构时不小心引入新的依赖.watchEffect 适用于一些逻辑相对简单,依赖源和逻辑强相关的场景. 你可以认为他们是同一个功能的两种不同形态,底层的实现是一样的. watch- 显式指定依赖源,依赖源更新时执行回调函数 watchEffect - 自动收集依赖源,依赖源更新时重新执行自身 响应式依赖收集 首先先需要了解一下 vue 3

  • Vue3使用Proxy实现数据监听的原因分析

    vue 数据双向绑定原理,而这个方法有缺点,并且不能实现数组和对象的部分监听情况;具体也可以看我之前写的一篇博客: 关于 Vue 不能 watch 数组 和 对象变化的解决方案,最新的 Proxy,相比 vue2 的 Object.defineProperty,能达到速度加倍.内存减半的成效.具体是怎么实现.以及对比旧的实现方法为啥能有速度加倍.内存减半的特性,下面我们来聊聊: Vue 初始化过程 Vue 的初始化过程,分别有Observer.Compiler和Watcher,当我们 new V

  • vue3中的watch和watchEffect实例详解

    目录 首先总结一下两者的区别: 下面是根据上面的第三点做的一些小实验: 总结 闲来无事,比较了一下 vue3 中的 watch 和 watchEffect,总觉得官方文档没咋说清楚,今天就小小实践了一下. 首先总结一下两者的区别: 1.watch 是惰性执行,而 watchEffect 不是,不考虑 watch 的第三个参数配置的情况,watch 在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而 watchEffect 是在程序执行到此处的时候就立即执行,而后再响应其依赖

  • 为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

    导 读 vue3.0中,响应式数据部分弃用了 Object.defineProperty ,使用 Proxy 来代替它.本文将主要通过以下方面来分析为什么vue选择弃用 Object.defineProperty . Object.defineProperty 真的无法监测数组下标的变化吗? 分析vue2.x中对数组 Observe 部分源码 对比 Object.defineProperty 和 Proxy 一.无法监控到数组下标的变化? 在一些技术博客上看到过这样一种说法,认为 Object.

  • vue3 watch和watchEffect的使用以及有哪些区别

    1.watch侦听器 引入watch import { ref, reactive, watch, toRefs } from 'vue' 对基本数据类型进行监听----- watch特性: 1.具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行 2.参数可以拿到当前值和原始值 3.可以侦听多个数据的变化,用一个侦听起承载 setup() { const name = ref('leilei') watch(name, (curVal, prevVal) => {

  • vue3怎么数据监听watch/watchEffect

    目录 watch()函数 watchEffect()函数 watch 与 watchEffect之间的联系与区别 我们都知道监听器的作用是在每次响应式状态发生变化时触发,在组合式 API 中,我们可以使用 watch()函数和watchEffect()函数, 当你更改了响应式状态,它可能会同时触发 Vue 组件更新和侦听器回调. 默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新之前被调用.这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态. 那么,我们来看一下,怎么

  • Vue3中watch监听对象的属性值(监听源必须是一个getter函数)

    目录 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 2. 原因 3.watch源码分析 4.doWatch源码分析 5.总结 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 <script lang="ts" setup> // 接受父组件传递的数据 const props = defineProps({ test: { type: String, default: '' } }) // 使用 watch 侦听 props 中的 test 属性

  • 浅析Proxy可以优化vue的数据监听机制问题及实现思路

    我们首先来看vue2.x中的实现,为简单起见,我们这里不考虑多级嵌套,也不考虑数组 vue2.x中的实现 其本质是new Watcher(data, key, callback)的方式,而在调用之前是先将data中的所有属性转化成可监听的对象, 其主要就是利用Object.defineProperty,. class Watcher{ constructor(data, key, cb){ } } //转换成可监听对象 function observe(data){ new Observer(d

  • VUE3中watch监听使用的不同情况总结

    目录 watch介绍 watch监听的不同情况 1 监听单个refimpl数据 2 监听多个refimpl数据 3 监听proxy数据 4 监听proxy数据的某个属性 5 监听proxy数据的某些属性 总结 watch介绍 vue中watch用来监听数据的响应式变化.获取数据变化前后的值 watch的完整入参 watch(监听的数据,副作用函数,配置对象) watch(data, (newData, oldData) => {}, {immediate: true, deep: true})

  • Vue3中watch监听使用详解

    目录 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 总结 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue"; export

  • vue数据监听解析Object.defineProperty与Proxy区别

    目录 前言 Object.defineProperty 与 Proxy 的区别 在使用上的差异 总结与思考 前言 总能深深感觉到自己能力有限,写这篇文章的目的纯粹是因为发现在实际工作中,和一些小伙伴交流时发现,虽然有些小伙伴大概知道 vue2 与 vue3 的区别,但并没有去进一步思考一些深一点的东西.尽管能力有限,但想着自己在起步时候的艰难,就想着分享一下自己的一些看法,虽然不一定有多深入,但能引起大家的一些思考也是好的. Object.defineProperty 与 Proxy 的区别 其

  • 浅谈vue实现数据监听的函数 Object.defineProperty

    在 ES5中新增了不少新的API, 例如  新增了 Object.xxx相关的方法,其中有一个定义属性相关的 Object.defineProperty 这个方法(还有Object.defineProperties)这个方法是 vue框架实现数据监听的核心方法,它的定义如下: Object.defineProperty([Object] obj, [String] propname, [Object] desp ) @param  obj  要配置属性的某个对象 @param propname

  • Vue中的数据监听和数据交互案例解析

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&

  • 如何用JS实现简单的数据监听

    概述 主要是用Object.defineProperty实现类似vue的数据绑定. 第一步 const data = { name: "tom", age: 14 } Object.defineProperty(data, "name", { get(){ return "name被读取了" }, set(val){ console.log('我被赋值了',val) } }) //将此代码放到浏览器控制台查看效果 console.log(data

随机推荐