vue知识点

最新推荐文章于 2025-08-04 19:10:34 发布

原创最新推荐文章于 2025-08-04 19:10:34 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Vue中解决页面跳转后组件不刷新的问题，通过激活钩子`activated()`确保数据更新。同时，讲解了如何使用`some()`方法检查前端数组是否存在空值，避免在提交时出现错误。这些技巧对于优化前端用户体验和数据验证至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. Vue页面跳转，第二次靳组件不刷新——activated()

1.背景：从采购合同界面进入新增采购合同界面，新增后返回采购合同界面，界面内容未出现新增的合同。

2.原因：vue组件和组件间使用router跳转的时候，除了首次实例化会加载数据，第二次进组件的时候，是不会再次实例化组件的，也就是调用的缓存，不能实时刷新组件

3.解决办法：增加 activated()方法，进行刷新

4.知识点：

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；

activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等

转载：关于VUE路由跳转的缓存问题 - 簡書

<template>
</template>
<script>
export default {
    data() {
      return {}
    },
    activated(){
        if(this.$route.params.isFresh){
            //注意路由跳转时$router.push()和$route.params的route,一个带r
            this.init();
        }else{} 
    },
    methods:{
        init(){},
    }
}

</script>
<style>
</style>

二. Vue前端判断前端数组是否有空值——some()

1.背景：录入多条采购合同明细，同时需要输入单价。如果明细单价没有输入，提交时则进行提示。

 let newSomeArr = this.qljPurchasecontractDetailList.some( (item,i) =>{
           
            return item.purchasePrice <= 0||item.purchasePrice==null;
          } )
          if(newSomeArr==true)
          {
            this.msgSuccess("单价为空，请填写单价");
            return;
          }

2.知识点：

1.some 查找数组中是否有数组条件的元素，如果查找到满足条件的元素，则终止循环，返回的是布尔值

var arr = ['abc','666','中文'];
    var flag = arr.some((v,i) => {
        return v === '666'
    })
    console.log(flag)  // 得到的是： true

2.filter 是查找满足条件的数组，返回一个满足条件的新数组

var arr2 = [22,66,55,77,99,555];
    var newArr = arr2.filter((v,i) => {
        return v > 30;
    })
    console.log(newArr)  // 得到：   [66, 55, 77, 99, 555]

区别：
1. filter 是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来
2. some 也是查找满足条件的元素是否存在，返回的是一个布尔值，如果查到第一个满足条件的元素就终止循环