关于写vue时候发现的那些坑（二）

滚滚长江东逝水
544 阅读3分钟

承接上文，接着再来罗列一些vue的踩坑历程，这些，有的是自己导致的问题，有些则是组件带来的问题

pexels-tima-miroshnichenko-5380664.jpg

  1. 在vue当中有个watch的函数是用来监听数据的变化的，一般都是直接监听某个变量某个数据的，比方说在data里面定义一个count，当你点击按钮的时候count会每次都加1，在watch函数里面，想监听哪个数据，可以直接把那个数据作为函数名，然后当成函数去使用，就像下面的count函数一样，打印出来的值都是最新变化的值，也可以在count函数接收两个参数，newVal和oldVal，就可以打印看看对比新旧数据变化。
// vue
<template>
  <div>
    <span>{{count}}</span>
    <button @click="addNum">+</button>
  </div>
</template>

<script>
export default {
   data () {
     return {
       count:0
     }
   },
   watch: {
     count (val) {
       console.log(val);
     }
   },
   methods: {
     addNum () {
       this.count++
     }
   }
}
</script>

<style>

</style>

image.png 但是咧，如果想要监听变化的数据在对象里面咋整，哎，可以这样做。

// vue
<template>
  <div>
    <span>{{numObj.count}}</span>
    <button @click="addNum">+</button>
  </div>
</template>

<script>
export default {
   data () {
     return {
       numObj:{
         count:0
       }
     }
   },
   watch: {
     'numObj.count' (val) {
       console.log(val);
     }
   },
   methods: {
     addNum () {
       this.numObj.count++
     }
   }
}
</script>

<style>

</style>

image.png 如图所示，用字符串包裹就行了，效果一样，这里并没有说如果是数组或者是对象当中数组的某个值的监听情况哦，仅仅是对象当中的某个值。

  1. includes函数的使用，在某些场景下，比方说不同的角色或者不同的选项会导致不同的页面展示效果，最常见的例如tab切换，或者当下拉框选择不同类型，下方的table或者文本、输入选项的变动的时候，可以用includes来简化。假如现在有个需求，有多个页面但是每个登录的角色不同，你需要根据不同角色展示不同页面，下面是一个简化的例子，那么你可以这么做:
// vue
<template>
  <div>
    <el-select clearable style="width: 100%" placeholder="评价类型" v-model="jurisdiction">
      <el-option label="登录页面" :value="0"></el-option>
      <el-option label="购物车页面" :value="1"></el-option>
      <el-option label="购物列表页面" :value="2"></el-option>
      <el-option label="管理员页面" :value="3"></el-option>
      <el-option label="账户管理页面" :value="4"></el-option>
      <el-option label="财务数据页面" :value="5"></el-option>
    </el-select>
    <span v-if="[3].includes(jurisdiction)">管理员看到的内容</span>    
    <span v-if="[0,1,2].includes(jurisdiction)">用户看到的内容</span>    
    <span v-if="[4,5].includes(jurisdiction)">财务看到的内容</span>    
  </div>
</template>

<script>
export default {
   data () {
     return {
       jurisdiction:0,
     }
   }
}
</script>

<style>

</style>

这部分是什么意思呢，就是说现在有6个页面，现在默认是登录页面，当你以不同的角色登录的时候，data当中的jurisdiction会发生变化，也就是下拉框选择的值变化的时候，会根据变化的值来选择对应的页面。 当你选择账户管理页面，jurisdiction变成4，那么只有财务可以看到内容，选择财务数据，就变成5，也是只有财务有权限看到该页面。includes会把右边的值和左边数组中的数字做对比，如果一样，就返回true，否则返回fasle，用这样的特性，在某些场景下可以优化简化代码。

  1. 做的项目交互情况比较多，且按步骤的话，一般操作都会让用户做二次确认，也就是弹窗了，代码放这里
// vue
this.$confirm("是否放弃", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.$router.go(-1);
      })
      .catch(() => {
        console.log(`取消放弃`);
    });

then函数就是确定之后的操作，catch则是取消后的操作。

刚写到一大半的时候，停电了，没办法，广州天气太热了，太多人开空调。现在是7月23号23:40分,我写文章都是边写边想的，也没打草稿，但大致是总结一些经验，方便后续回顾。个人不太喜欢写很长的文章，当然我也可以那么做，并且写好草稿在润色那种，不过个人平时下班到家就是刷B站，或者洗完澡就睡了。而且我更喜欢一天一点点，然后日积月累的进步带来的喜悦，如果一口气都写完了，那还不是和贤者时间一样，后续都是寂寞，哈哈哈哈。

好了，希望对你有所帮助，以上。

avatar
文章
阅读
粉丝