Vue3监视属性watch详解(附带详细代码与讲解!!!)

• 前端

watch()默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。

第一个参数是侦听器的源。这个来源可以是以下几种：

  • 一个函数, 一个返回值
  • 一个ref
  • 一个响应式对象(reactive定义的)
  • …或是由以上类型的值组成的数组

第二个参数是一个回调函数, 这个回调函数可接收三个参数: 新值(newValue)、旧值(oldValue)、以及一个副作用清理的回调函数

第三个参数是一个可选的参数是一个对象构成, 如:deep(深度监视)、immediate(创建时立即监听一次)等等…

监视ref所定义的一个响应式数据

Vue3监视属性watch详解(附带详细代码与讲解!!!)

 监视ref定义多个响应式数据

定义多个响应式数据, 传递的第一个参数是用数组的形式多包裹

Vue3监视属性watch详解(附带详细代码与讲解!!!)

 监视reactive所定义的一个响应式数据的全部属性

注意点:

  1. 用reactive数据无法正确的获取旧值(oldValue)
  2. 强制开启了深度监视(关闭deep属性无效!!!)

Vue3监视属性watch详解(附带详细代码与讲解!!!)

 可以通过打印结果来看, 新值与旧值是一模一样的, 无法监视旧值(等官方后续的版本)

上方代码, 设置了deep属性为false, 但是打印出来结果依旧可以监视到, 所以deep属性是无效的

 监视reactive所定义的一个响应式数据的某个数据

在watch中参数1用.方式读取值的话, 会警告的, 操作也不可用, 而如何才能监视某个数据呢?

在参数1中, 需要配置一个函数的, 通过返回值来传递

Vue3监视属性watch详解(附带详细代码与讲解!!!)

可以看出代码中所书写的watch中参数1的返回值配置

 监视reactive所定义的一个响应式数据的某些数据

如果看了前面的监视ref定义多个响应式数据与监视reactive所定义的一个响应式数据的某个数据看明白了, 自己就可能知道怎么写了, 就是用一个数组包裹, 数组里面写多个函数来返回所响应的数据

Vue3监视属性watch详解(附带详细代码与讲解!!!)

 

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/2f205e9059.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐