vue中watch监听器的触发时机(watch的坑及解决)

目录
  • watch监听器的触发时机
    • 起因
    • 代码
    • watch
    • 控制台
    • 说明
  • vue watch的理解小记

watch监听器的触发时机

起因

我需要在页面created时获得商家的类型id值，然后监听id值，动态的改变请求接口的地址。请求接口的函数在mounted中执行。业务逻辑写完后发现，页面在第一次加载时，接口没有数据，原因接口地址为空，即接口地址没有改变。

代码

 created() {
    this.typeId = this.$route.params.id;
    console.log("this.typeId的值发生改变，触发watch");
  },
  mounted() {
    console.log(this.typeUrl, "mounted中的typeUrl的值");
    //访问接口的函数
    this.getData();
  },

watch

  watch: {
  // 监听订单类型 给出对应面包屑
  typeId: function (val) {
    if (val == 1) {
      console.log("watch触发了");
      this.selfBreadcrumb[1].name = "核销订单";
      this.typeUrl = "settlements";
      console.log(this.typeUrl, "这里是watch");
    } else if (val == 2) {
      this.selfBreadcrumb[1].name = "物流订单";
      this.typeUrl = "logistics-orders";
    } else if (val == 4) {
      this.selfBreadcrumb[1].name = "外卖订单";
      this.typeUrl = "takeout-orders";
    }
  },

控制台

说明

watch的触发会在created和mounted结束后。

先占个坑，具体原理如何只有等我项目完成了再来康康。

vue watch的理解小记

刚开始学时，感觉自己懂了。可是到用时才发现自己是渣渣中的渣渣。。。

想通过路由id的变化来改变组件的加载数据时，遇到了一个问题，就是，组件不会重新渲染。一脸懵逼了，，，

找到了watch的监控方法时，又用不好。扣扣会用了一些，赶紧记下来。

首先确认 watch是一个对象，一定要当成对象来用。

对象就有键，有值。

  • 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。
  • 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。
  • 值也可以是函数名：不过这个函数名要用单引号来包裹。

第三种情况厉害了。

值是包括选项的对象：选项包括有三个。

  • 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
  • 第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
  • 第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。
var vm = new Vue({
  data: {
    a: 1,
    b: 2
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 选项的对象
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true，
      immediate: true
    }
  }
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决Vue watch里调用方法的坑

    这里是说watch调用methods里方法的时候,页面经常会报找不到方法 这个时候一定要在watch里去输出一下this, 看看this包裹的壳是不是多了好多层,所以找不到方法,虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题. 例如 正常情况下用this.functionname()就可以调用了. 但是在一些情况下(现在本人还没找到原因)在控制台输出this的时候你会发现数据经常是这样包裹的a{name},name里面对你的methods还包裹了一层,所以使用方法的时候就会变成 this

  • VUE watch监听器的基本使用方法详解

    目录 1.下面代码是watch的一种简单的用法 2.immediate 立即监听 3.handler方法 4. deep属性 总结 侦听器一般来说是用来监听数据的变化,默认是在数据发生变化时执行. 监听的数据名放到这里面作为函数名,这个函数里面有两个参数,一个是新值,一个是旧值. 在vue中,使用watch来响应数据的变化,关于watch的用法大致有三种. 1.下面代码是watch的一种简单的用法 <div id="app"> <input type="te

  • vue中的watch监听数据变化及watch中各属性的详解

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep

  • vue watch监听方法总结

    目录 1.vue中的watch作用就如其命名就是监听的作用 2.监听这个对象的属性 3.监听这个对象的属性 4.监听这个对象的属性 在vue中,使用watch来响应数据的变化,关于watch的用法大致有三种. 1.vue中的watch作用就如其命名就是监听的作用 比如有个对象: watchData: { name: '', age: '', } 2.监听这个对象的属性 watchData: { handler: function() { console.log(); }, deep: true

  • vue中watch监听器的触发时机(watch的坑及解决)

    vue中watch监听器的触发时机(watch的坑及解决)

    目录 watch监听器的触发时机 起因 代码 watch 控制台 说明 vue watch的理解小记 watch监听器的触发时机 起因 我需要在页面created时获得商家的类型id值,然后监听id值,动态的改变请求接口的地址.请求接口的函数在mounted中执行.业务逻辑写完后发现,页面在第一次加载时,接口没有数据,原因接口地址为空,即接口地址没有改变. 代码 created() { this.typeId = this.$route.params.id; console.log("this.

  • Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

    在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下. 1.闪现的原因 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况.因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码. 2.解决的办法 其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出

  • vue中的mescroll搜索运用及各种填坑处理

    父组件处理: <template> <div class="wrap"> <!-- 搜索框 --> <div class="searchInputArea"> <div class="searchBarBox"> <div class="inputWrap" > <form onsubmit="javascript:return false

  • Vue中emit事件无法触发的问题及解决

    目录 Vue emit事件无法触发问题 Vue中emit的使用 vue子传父参数的方法共有两种 下列优先讲解下其emit的传输方法 Vue emit事件无法触发问题 在父组件中定义事件监听,会出现无法触发对应的事件函数,在下面的代码中,我想通过v-on:event_1=“handle”, 想监听子组件中的event_1事件,但尽管事件发生了, 但还是触发不了,这个问题在于v-on:event_1="handle"的位置,需要放在 <my-template :users=“user

  • vue中使用vant的Toast轻提示报错的解决

    目录 使用vant的Toast轻提示报错 提示信息弹出(toast) 实现过程如下 使用vant的Toast轻提示报错 记录一下今天使用vant中的Toast 轻提示,按照官方文档中的方法去使用发现报错使用不了. 文档中是这样写的 Toast.success('成功文案'); Toast.fail('失败文案'); main.js中引用vant后直接调用Toast报错. 实际使用是这样写 this.$toast.success("成功文案"); this.$toast.fail(&qu

  • Vue中keyup.enter和blur事件冲突的问题及解决

    目录 keyup.enter和blur事件冲突问题 解决方法 keyup.enter和blur同时触发如何规避 问题描述 实现代码 解决办法 keyup.enter和blur事件冲突问题 <el-input class="input-new-tag" v-if="row.inputVisible" v-model="row.inputValue" :ref="$index" size="small"

  • Vue中v-html图片过大导致溢出的问题及解决

    目录 vue v-html图片过大导致溢出 问题描述 关于富文本渲染内容图片溢出问题 描述问题场景 解决方法 总结 vue v-html图片过大导致溢出 问题描述 移动端开发中,经常遇到渲染富文本的需求!但是也会有很多问题,比如遇到 v-html 渲染富文本时图片会溢出,内容里边的图片太大,导致图片把页面撑的比较宽. 找了很多方法没有用!然后自己试了好几种方法!最后通过简单的 一行 css 代码让图片正常显示了 图片太大,把页面变成可以左右滑动,让之前一些样式失效,比如下面的 标头(商品详情)

  • vue中使用v-if隐藏元素时会出现闪烁问题的解决

    目录 使用v-if隐藏元素时出现闪烁问题 v-if控制显隐,页面加载出现闪现 v-cloak 使用v-if隐藏元素时出现闪烁问题 解决办法在div中加入v-cloak <div class="mask" v-if="modelShow" v-cloak></div> 然后在css中 [v-cloak] {   display: none; } 就OK啦~ v-if控制显隐,页面加载出现闪现 v-cloak <div id="d

  • vue中使用$http.post请求传参的错误及解决

    vue中使用$http.post请求传参的错误及解决

    目录 使用$http.post请求传参的错误 vue post请求之坑 解决方法 使用$http.post请求传参的错误 在使用$http请求后台,照常我们在后端 使用注解@PostMapper或者 @RequestMapping(value = “XXXX”,method = RequestMethod.POST)接受请求 handleAdd(node) { this.$http.post("/item/category/addCategory",{ node:node }) .th

  • 如何在vue中使用jsx语法

    如何在vue中使用jsx语法

    目录 为什么需要在vue中使用jsx 在vue中如何使用jsx template转jsx的语法转换 为什么需要在vue中使用jsx 几年前面试的时候,被问过这个问题,当时我一脸懵,这两个东西为啥要混用呢? 直到后来,我遇到了这种场景. tab切换展示组件,大部分组件展示表格,除了2个tab需要展示不同,这个不同,怎么处理呢? 当然可以直接改封装的tab组件,v-if条件渲染嘛 那如果后面再有其他需求,tab组件继续写if么 这个时候,组件就过于冗余啦 那怎么让组件统一处理呢?当然可以用rende

随机推荐