山西网站建设制作推广,手机网站建设宽度,表白网站制作系统源码,天津网站设计策划组件复用会在两种情况下发生#xff1a;1、使用 keep-alive 时#xff0c;页面再次跳转时#xff0c;数据不更新每一次路由的切换都会导致页面被重新渲染#xff0c;无论是各种钩子还是异步获取数据函数都会被执行#xff0c;为了提高网站性能#xff0c;可以使用 keep-a…组件复用会在两种情况下发生1、使用 keep-alive 时页面再次跳转时数据不更新每一次路由的切换都会导致页面被重新渲染无论是各种钩子还是异步获取数据函数都会被执行为了提高网站性能可以使用 keep-alive 包裹住 router-view当路由的内容被加载过一次之后就把内容放到内存中下一次再进这个路由时不需重新渲染这个页面直接从内存中将内容取出放到页面中。此时有两种选择可以处理组件复用时导致数据不刷新的问题1)如果一个页面需要动态获取数据的组件很多那么就直接将此组件设置不实用 keep-alive 即可2)如果一个页面只有一两个组件需要动态获取数据那么就在 activated 钩子中重新向后端获取部分组件的数据如果不是实时动态获取数据而只是在用户有相关操作时需要获取数组那么可以结合一个公共的布尔变量来判断是否需要重新获取数据。那么这种方式又可以使用 keep-alive 来提高性能又可以避免它带来的问题。2、同一组件参数变化页面数据不更新的问题比如说在详情页之间切换时会导致不同详情页出现同一批数据的结果这是 router-view 复用组件导致的问题。1)解决的基本思路就是改变 router-view 的内部属性 key可以先参考下 vue 项目是如何改变 router-view 的 key 的vue刷新当前路由router-view 复用组件时不刷新的3种解决方案总结请将链接中的三种方式写到 layouts/default.vue 中另外说下 watchQuery 的用法比如http://localhost:3000?namewangnumber123 这个例子中watchQuery: true 是说路由后面的所有查询参数(包括 name 和 number)都被监听了watchQuery: [name] 的意思是只监听了 name 这个查询参数。如果有查询参数就使用 watchQuery 方案否则可以使用其他两种方式。当然也可以使用 watch 直接监听路由的变化。
