v-show多个条件时画面改变了多次？

  • Z时代
  • 2024-03-12
  • 分类：IT

v-show="cond1&&cond2&&cond3&&cond4"

画面上v-show的条件有多个（cond1，cond2，cond3，cond4）
为什么cond4的函数先被执行了？
而且当满足cond4的时候画面先改变了一次，当执行cond1的时候画面又重新改变了，这是正常的吗？能不能等四个条件全都判断完 只改变一次呢？

cond如下：

computed: {   
     cond1() {
      return this.getCond1;
    },
    cond2() {
      return this.userInfo.userType === 1 ? true : false;
    },
    cond3() {
      return this.userInfo.key1 === "aaa";
    },
    cond4() {
      let flag = false
      let arr = this.getHealthConn;
      if(null != this.getHealthConn){
        for(var val of arr){
          for (var key in val) {
            if (key === "key1") {
              if(val[key].status === "01"){
                return true;
              }
            }
          }
        }
      }
      return false;
    }
}

回答：

第一 你这四个 cond 都是计算属性，
第二 要搞清楚计算属性的缓存机制，比如计算属性 cond1 的计算过程中用到了 getCond1 ，那么当你重复读取 cond1 的值时，vue 会判断两次读取之间 所用到的 getCond1 有没有发生变化，如果发生过变化，就重复运算 cond1 的值，如果 getCond1 没有发生过变化，cond1 就继续使用上一次计算出来后缓存的的值而不是重新计算。
第三 要记住响应式是怎么实现的，vue给你的承诺(mvvm，以及vue的运行机制)，就是当vue检测数据发生变化的时候会重新解析模板。(这里初学者容易掉进坑里，不要下意识的当成了模板会驱动数据，不是模板推着你这四个cond执行一遍。 而是你的数据会引起模板重新解析)

你说 :"为什么cond4的函数先被执行了？"那说明 计算 cond4 所用到的属性 getHealthConn，发生了变化。
也就是如下流程：
getHealthConn变化 => 模板解析遇到 v-show="cond1&&cond2&&cond3&&cond4" => 重新计算（cond4）或读取缓存（cond1,2,3）中 cond 的值 =>都计算完了，根据虚拟dom 更新到真实dom

回答：

不过你这四个函数是啥v-show="cond1&&cond2&&cond3&&cond4"可以改写为
v-show="flag()"

flag ( ) {
    let f = cond1()&&cond2()&&cond3()&&cond4()
    retutn f
}
本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

cond4 被执行，只有一个可能，前面三个都是 true。

所以，如果前面是 false， conf4 就不会执行了。

说话你的 cond1 是计算属性吧？ 计算属性有懒计算和结果记录的功能，所以多次使用有可能不需要多次求值

测试地址：https://codepen.io/linong/pen/vYzVaRB

v-show多个条件时画面改变了多次？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

这四个条件发生变化肯定不是一起变化的吧，如果不是一起变化的，那么更新本来就不在一个 tick 中，因此，它切换多次就是需要渲染多次。

按照你这个描述，除非你四个条件的变化都在一个 tick 中更新才可以实现，即都在一个方法里面进行改变等等，可以看看关于更新部分的源码逻辑去分析。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

以上是 v-show多个条件时画面改变了多次？ 的全部内容， 来源链接： utcz.com/p/933874.html

回到顶部