Vue2中返回页面，如何实现数据刷新

经常会遇到页面数据在详情页新增删除修改后，在上一级列表页面实现数据更新，如果想要实现这个方法，可以借用vue2中的一个生命周期钩子“activated”：

activated

activated 生命周期钩子主要用于处理 Vue.js 组件在被 keep-alive 包裹时的一些特定情况，会在组件被激活时调用；没有被 <keep-alive> 包裹时，就不能使用。

作用：

数据刷新或重新获取： 当组件被缓存后再次被激活时，需要重新获取数据或刷新页面内容。

使用方法：

export default {
  activated() {
    // 在页面返回时数据刷新
    this.loadData();
  },
  methods: {
    loadData() {
      
    }
  }
}

相同作用的生命周期：在Vue3中使用onActivated，在react中使用useEffect。

另一种实现方法：

使用路由导航守卫：在路由切换时执行数据更新逻辑。

export default {
  beforeRouteEnter(to, from, next) {
    // 在路由切换前执行数据刷新逻辑
    next(vm => {
      vm.loadData();
    });
  },
  methods: {
    loadData() {
      
    }
  }
}

Vue.js 组件没有被 keep-alive 包裹时，如何实现数据更新

没有被 <keep-alive> 包裹，意味着每次组件销毁后都会重新创建，数据也会重新初始化。

使用created：

export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        
      } catch (error) {
        console.error('Failed to fetch data:', error);
      }
    }
  }
};

使用 Watcher 监听数据变化：

export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newValue, oldValue) {
      console.log('Count changed:', newValue, oldValue);
      // 在 count 发生变化时执行相应的操作
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};