关于 Vue 组件中的 watch immediate: false 无效的问题

尝试在项目中使用VUE来处理复杂的数据操作,但是每次访问都会触发侦听
改为immediate: true 则会触发两次

data() {
  return {
    data: null,
    jsonData: {},
    sceneList: [],
    // 保存按钮状态
    changeFlag: false,
  }
},
created() {
    // 获取数据,略
    ...
    this.data = response.data;
},
watch: {
  data: {
    handler(newVal) {
      this.jsonData = JSON.parse(JSON.stringify(newVal));

      // 仅有此处唯一一次赋值
      this.sceneList = this.jsonData.scenes;
  },
  sceneList: {
    handler(newVal) {
      console.log(newVal)
      console.log('触发sceneList更新');
      this.changeFlag = true;
    },
    // true 会触发两次,false 也会触发一次
    immediate: false,
  }
},

Vue 组件中的 watch 被触发两次

找了许多资料也没看到相似的问题,哪位遇到过这种问题的分享一下解决方法

vue
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
最佳答案

created 进来之后赋值改变了 this.data,触发 watch 中 data 的毁掉,然后再更新sceneList 触发会带哦,所以不配置 immediate 的时候就会触发一次 sceneList;配置了 immediate: true,表示组件初始化之后就立马执行一次,加上上边的触发逻辑,就是两次。

3年前 评论
讨论数量: 4
happyqian_ah

你都监听data和sceneList,当然会触发了,immediate=true,不管值是否有变化都会强制触发,后来发现值变化了又触发了一次,执行两次正常的,为什么你把两个对象放在watch里面有点奇怪。

3年前 评论
cnguu

请求是异步的,所以可能会触发一次 watch,你可以等待请求回来再 watch

3年前 评论
happyqian_ah 3年前
happyqian_ah 3年前

created 进来之后赋值改变了 this.data,触发 watch 中 data 的毁掉,然后再更新sceneList 触发会带哦,所以不配置 immediate 的时候就会触发一次 sceneList;配置了 immediate: true,表示组件初始化之后就立马执行一次,加上上边的触发逻辑,就是两次。

3年前 评论

@wj2015 @happyqian_ah @cnguu 感谢几位的热心解答,是我钻牛角尖了 :sob:。我的问题已经解决,但不是描述中的问题 还是得补一下Vue基础 :joy:

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!