在vue实际项目中,很多时候会在mounted或者created请求数据接口然后渲染到页面上,但是这两个生命周期都是只会在第一次进入页面后执行,再次进入该页面时,由于vue-router的机制,会缓存已经加载过的页面数据这样会大大提高效率,所以我们使用$router.push等跳转操作时会发现已经在其他页面上修改的数据,跳转到这个页面,修改的数据并没有变化。

实际例子:a页面展示了一组数据,需要跳到另一个页面修改其中的一项数据然后用router.push再跳转回来。然而实际跳转回来a页面的数据并没有改变。这里我们就需要用到actived这个生命周期了:下面是官网api的解释:

vue再次进入页面不会再次调用接口请求_Vue

可以看出axtived需要配合keep-alive使用

我们就需要再项目的router-view加上keep-alive,例如:

vue再次进入页面不会再次调用接口请求_Vue.js_02

然后在a页面加上actived生命周期:

vue再次进入页面不会再次调用接口请求_Vue.js_03

进入该页面就会触发actived,然后执行数据请求接口,页面数据就进行了更新。

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

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

在vue实际项目中,很多时候会在mounted或者created请求数据接口然后渲染到页面上,但是这两个生命周期都是只会在第一次进入页面后执行,再次进入该页面时,由于vue-router的机制,会缓存已经加载过的页面数据这样会大大提高效率,所以我们使用$router.push等跳转操作时会发现已经在其他页面上修改的数据,跳转到这个页面,修改的数据并没有变化。

实际例子:a页面展示了一组数据,需要跳到另一个页面修改其中的一项数据然后用router.push再跳转回来。然而实际跳转回来a页面的数据并没有改变。这里我们就需要用到actived这个生命周期了:下面是官网api的解释:

vue再次进入页面不会再次调用接口请求_Vue

可以看出axtived需要配合keep-alive使用

我们就需要再项目的router-view加上keep-alive,例如:

vue再次进入页面不会再次调用接口请求_Vue.js_02

然后在a页面加上actived生命周期:

vue再次进入页面不会再次调用接口请求_Vue.js_03

进入该页面就会触发actived,然后执行数据请求接口,页面数据就进行了更新。

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

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