您的位置:

Vue Activated详解

一、Vue Activated是什么?

Vue Activated是Vue生命周期函数中的一个阶段,该阶段发生在Vue实例被激活时。在这一阶段,Vue实例已经完成了挂载和渲染,并准备好与DOM节点进行交互。

具体来说,当Vue组件被渲染到页面上并且显示出来时,就会激活Vue Activated这一生命周期钩子函数。

二、Vue Activated有什么用处?

Vue Activated可以让我们在Vue组件被激活时进行一些必要的操作,比如:

1. 发送请求获取数据

  
  export default {
    data() {
      return {
        dataList: []
      };
    },
    activated() {
      axios.get('/api/data').then(res => {
        this.dataList = res.data;
      });
    }
  }
  

在Vue Activated这一生命周期钩子函数中发起请求,获取数据并保存到组件的data属性中。这样做的好处是可以确保在组件显示出来时,数据已经准备好了。

2. 初始化第三方插件或库

  
  export default {
    activated() {
      $('.carousel').carousel();
    }
  }
  

在Vue组件被激活时,可以初始化第三方插件或库,比如bootstrap的轮播组件carousel。这样做可以确保插件或库已经被正确初始化并且可以正常工作。

3. 路由参数的变化

  
  export default {
    computed: {
      userId() {
        return this.$route.params.id;
      }
    },
    activated() {
      console.log('userId:', this.userId);
    }
  }
  

在Vue Activated中可以检测路由参数的变化,比如获取动态路由参数id的值,并进行相应的操作。

三、Vue Activated注意事项

在使用Vue Activated时,有些需要注意的事项:

1. 不要和created混淆

Vue Activated和created是不同的生命周期函数,created发生在实例被创建时,而Vue Activated发生在实例被激活时。因此,在使用Vue Activated时一定要注意和created的区别。

2. 父组件和子组件的Activated顺序问题

当一个父组件包含多个子组件时,Activated的触发顺序存在一定的问题。具体来说,当一个父组件被激活时,它的子组件的Activated不一定会按照父组件→第一个子组件→第二个子组件的顺序触发。可能会存在父组件→第二个子组件→第一个子组件的情况。因此,在进行相关操作时要注意组件Activated触发的顺序问题。

3. keep-alive组件与Vue Activated的配合使用

当使用keep-alive组件缓存组件时,Vue Activated只会在组件第一次被激活时触发一次,如果组件缓存起来后再次激活时,Vue Activated不会被再次触发。如果需要再次触发Vue Activated,需要在keep-alive组件上添加include属性或者exclude属性来实现。

四、小结

Vue Activated是Vue生命周期函数中非常重要的一个阶段,它发生在组件被激活时,通常用来进行一些跟DOM交互相关的操作,比如发送请求获取数据,初始化第三方插件、检测路由参数变化等。