vue中使用watch监听同时监听两个数据

这篇具有很好参考价值的文章主要介绍了vue中使用watch监听同时监听两个数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用场景,创建一个子组件,父组件会向子组件中穿递一个状态 - "status" ,子组件需要同时监听this.$route.params中的值和status,然后再去调方法,所以需要同时监听文章来源地址https://www.toymoban.com/news/detail-506127.html

props: {
    status: {
      type: Boolean,
      default: false,
    },
},

computed: {
    isStartExercise() {
      // 路由上的数据
      let a = this.$route.params.sectionTaskId;
      // 父组件传过来的数据
      let b = this.status;
      // return 出来并且对其进行监听
      return { a, b };
    }
}

watch: {
    isStartExercise: {
      immediate: true,
      handler(n) {
        if (n.a && n.b) {
          // 判断这两个值同时存在,再进行业务逻辑操作
          
        }
      },
    },
  },

到了这里,关于vue中使用watch监听同时监听两个数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中用watch监听响应式数据的注意点

    如果你在vue3中使用reactive()方法创建响应式数据,然后又用torefs()方法将响应式数据解构成单一的ref响应式数据。 此时,如果你想用watch监听解构出来单一的响应式数据,watch不起作用。 此时,你需要用watch监听之前的reactive()方法创建的数据,这样是能监听到的,要开启深度监

    2024年02月13日
    浏览(36)
  • 在 Vue.js 中,使用 watch 监听data变量如:对象属性/data变量

    在 Vue.js 中,使用 `watch` 监听对象属性 的变化时,应该将属性名作为 字符串 传递给 `watch` 选项。 示例如下: ```javascript updateAddChuZhenForm函数 现在,当 `isCheck1` 或 `isCheck2` 的值发生变化时,相应的 `watch` 函数将被触发。 ``` 如果你想要 监听一个普通变量 ,而 不是 Vue 实例的属

    2024年02月09日
    浏览(43)
  • vue中的Computed和watch区别即使用方法、场景

    在Vue.js, computed 是一个非常有用的属性,它允许声明计算属性,这些属性会根据其依赖的数据进行自动更新,而无需手动触发。 computed 属性常用于根据现有的响应式数据进行计算,以生成派生的数据,而这些数据的值会随着依赖数据的变化而自动更新。 计算属性的缓存:

    2024年02月10日
    浏览(43)
  • vue中created、watch、methods的区别,一般如何使用,在什么场景下使用

    在Vue中, created 、 watch 和 methods 是Vue实例中常用的三个选项。它们的作用和使用场景如下: created : 作用: created 是Vue实例生命周期钩子函数之一,在Vue实例创建完成后立即调用。在 created 钩子函数中,可以执行一些初始化逻辑、数据请求和监听事件等操作。 使用场景:一

    2024年02月11日
    浏览(45)
  • Vue2 Watch监听

    在Vue2中,我们可以使用watch来监听一个数据的变化,并且在数据变化时执行一些操作。这个特性是Vue2非常强大的一个功能,可以帮助我们监控一个或多个数据的变化,然后做出相应的反应。 要使用watch,我们需要在Vue组件的选项中声明一个watch对象,如下: watch对象的每个属

    2024年02月17日
    浏览(52)
  • vue3 watch 监听多值以及深度监听用法

    1.监听单个值 引入: import {…, watch} from “vue”; import {useRouter} from ‘vue-router’; 2.监听多个值 还是上面路由的例子 2.深度监听

    2024年02月14日
    浏览(53)
  • vue watch监听对象 新旧值一样

    废话不多说,直接上代码 通过打印最后发现一个问题,watch中的新旧值一样 解决方案 通过computed剥离与原数据的引用关系

    2024年02月12日
    浏览(38)
  • Vue2 watch监听props的值

    再次遇到监听子组件收到父组件传过来的值,如果这个值变化,页面中的值发现是不会跟着同步变化的。所以监听props中的值,一直监听。   代码:  

    2024年02月13日
    浏览(40)
  • vue 初始化方法 create,beforeMount,mount,computed,watch 方法执行顺序及使用场景

    前言:vue 存在一些基本属性和相关对象如果合理使用,可以避免代码混乱 执行顺序 create beforeMount computed mounted watch 方法说明 created执行时挂载阶段还没有开始,模版还没有渲染成html,所以无法获取元素。created钩子函数主要用来初始化数据。 beforeMount 这一步的时候,模版已经

    2024年02月11日
    浏览(51)
  • Vue3前端开发,watch侦听器的深度监听和精确监听

    Vue3前端开发,watch侦听器的深度监听和精确监听!今天和大家分享的内容是,关于watch的深度侦听和精确监听。 首先看一下,第一个案例,练习的是,深度监听的效果。默认是浅的侦听,是不会触发回调函数的。 如图,当我们点击按钮,修改num值的时候,触发了回调函数,在

    2024年01月23日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包