美文网首页
Vue的watch写法及用法注意

Vue的watch写法及用法注意

作者: chouchou723 | 来源:发表于2019-05-06 14:20 被阅读0次

今天碰到一个需求是在首页(单独组件)点击,弹出在header组件里的聊天框,通知通过vuex进行状态管理,然后watch状态来进行打开窗口,但是发现如果commit改变state太快,普通的写法并不会触发,所以特地记录一下.

1.普通写法:(第一次会触发,第二次就不行了,即使我在首页再多执行一次重置chatStatus)

 首页点击
 this.$store.commit('getChat', '')//重置chatStatus
this.$store.commit('getChat', 'start')//通知header打开聊天chatStatus

 header组件
watch: {
      '$store.state.chatStatus'(n, o) { //具体到某一对象下的属性用''包裹下
          if (n === 'start') {//因为上面的commit太快,导致不会触发
            this.chatWith();//可以在方法里进行重置chatStatus,或者加一个延时到赋值操作上
          }
        },
    },
cityName(newName, oldName) { //普通的观察变量
      // ...
    }

2.带immediate和deep的写法
(immediate:如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。)
(deep:当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。)

首页点击
  this.$store.commit('getChat', 'empty')//重置chatStatus
  this.$store.commit('getChat', 'start')//通知header打开聊天chatStatus

header组件
watch: {
'$store.state.chatStatus': {
        handler(n, o) { //接收首页状态
console.log(n,o)//打印结果,虽然每次点击之后,结果还是start,start,但是这个时候就可以重复触发了(实测原因是因为commit太快..所以导致数据同步速度没变化快)
          if (n === 'start') {
            this.chatWith();
          }
        },
        deep: true,//加了deep之后就解决了
      },
    cityName: {//普通变量
      handler(newName, oldName) {
        // ...
      },
          deep: true,
      immediate: true
    }
  } 

总结:其实只要在触发的方法里去做重置操作就行了...避免 重置操作后立刻就执行赋值操作,导致数据切换太快,而无法触发

相关文章

  • Vue的watch写法及用法注意

    今天碰到一个需求是在首页(单独组件)点击,弹出在header组件里的聊天框,通知通过vuex进行状态管理,然后wa...

  • vue watch用法

    vue watch用法

  • Vue中的watch用法

    Vue中的watch用法 Vue.js中的watch主要用于观察Vue实例上的数据变动。 栗子:

  • Vue中watch的详细用法

    在Vue中,使用watch来响应数据的变化。watch的用法大致有下面三种: 1. 基本用法 下面代码是watch...

  • Vue中watch的详细用法

    在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:''...

  • vue watch基础用法

    在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法: 直...

  • vue-Vue的watch实现原理及watch实现方式

    vue--Vue的watch实现原理及watch实现方式 参考: https://www.jianshu.com/...

  • Watch监听

    侦听器,监听数据的变化,基础用法在vue中,使用watch来响应数据的变化。watch的用法大致有三种。 1、下面...

  • Vue -- watch用法

    watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。 vue...

  • Vue -- watch用法

    组件参数传递,常常会用到的参数监听-深度监听 --by Affandi ⊙▽⊙

网友评论

      本文标题:Vue的watch写法及用法注意

      本文链接:https://www.haomeiwen.com/subject/buvroqtx.html