189 8069 5689

Vue中watch和watchEffect的区别是什么

今天小编给大家分享一下Vue中watch和watchEffect的区别是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

创新互联公司主要从事网页设计、PC网站建设（电脑版网站建设）、wap网站建设（手机版网站建设）、响应式网站开发、程序开发、网站优化、微网站、重庆小程序开发等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了丰富的成都网站建设、网站设计、网站设计、网络营销经验，集策划、开发、设计、营销、管理等多方位专业化运作于一体。

前言

watch函数与watchEffect函数都是监听器，在写法和用法上有一定区别，是同一功能的两种不同形态，底层都是一样的。

watch和watchEffect的对比

watch

  • watch显式指定依赖数据，依赖数据更新时执行回调函数

  • 具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性，页面首次加载就会执行）

  • 监视ref定义的响应式数据时可以获取到原值

  • 既要指明监视的属性，也要指明监视的回调

watchEffect

  • watchEffect自动收集依赖数据，依赖数据更新时重新执行自身

  • 立即执行，没有惰性，页面的首次加载就会执行

  • 无法获取到原值，只能得到变化后的值

  • 不用指明监视哪个属性，监视的回调中用到哪个属性就监视哪个属性

深度解析watch函数

watch函数有两个小坑：

  • 监视reactive定义的响应式数据（该数据为一个对象，因为reactive只能定义数组或对象类型的响应式）时：oldValue无法正确获取，会强制开启深度监视，deep配置不生效。

  • 监视reactive定义的响应式数据中的某个属性时，且该属性是一个对象，那么此时deep配置生效。

具体的watch函数的用法在下面代码中都有所体现，注释详细

watch取消监听

const stop1 = watch(
  [() => nameObj.name, () => nameObj.name],
  ([curName, curEng], [prevName, curEng]) => {
    console.log(curName, curEng, "----", prevName, curEng);
    setTimeout(() => {
      stop();
    }, 5000);
  });

深度解析watchEffect函数

函数用法如下代码所示，注释详细：

watchEffect取消监听

const stop = watchEffect(() => {
  console.log(nameObj.name);
  setTimeout(() => {
    stop();
  }, 5000);});

watchEffect与computed

watchEffect与computed有点像：

  • 但是computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。

  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

  • computed若是值没有被使用时不会调用，但是watchEffect始终会调用一次

举例：

以上就是“Vue中watch和watchEffect的区别是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。


网页题目：Vue中watch和watchEffect的区别是什么
文章路径：http://cdxtjz.cn/article/ihjhpd.html

其他资讯