网站建设默认字体,2020广东黄页,wordpress 4.7.1,企业管理公司取名字大全文章目录前言一、刷新整个页面二、使用v-if标记三、forceUpdate四、key-changing五、应用场景vue具有缓存的页面的强制刷新进入页面输入框自动聚焦前言
Vue的双向绑定属于自动档#xff1b;在特定的情况下#xff0c;需要手动触发“刷新”操作#xff0c;目前有四种方案可以…
文章目录前言一、刷新整个页面二、使用v-if标记三、forceUpdate四、key-changing五、应用场景vue具有缓存的页面的强制刷新进入页面输入框自动聚焦前言
Vue的双向绑定属于自动档在特定的情况下需要手动触发“刷新”操作目前有四种方案可以选择
刷新整个页面最low的可以借助route机制使用v-if标记比较low的使用内置的forceUpdate方法较好的使用key-changing优化组件最好的 一、刷新整个页面
router.go(0)二、使用v-if标记
如果是刷新某个子组件则可以通过v-if指令实现。我们知道当v-if的值发生变化时组件都会被重新渲染一遍。因此利用v-if指令的特性可以达到强制刷新组件的目的。
templatecomp v-ifrefresh/compbutton clickrefreshComp()刷新comp组件/button
/template
script
import comp from /views/comp.vue
export default {name: parentComp,data() {return {refresh: true}},methods: {refreshComp() {// 移除组件this.refresh false// 在组件移除后重新渲染组件// this.$nextTick可实现在DOM 状态更新后执行传入的方法。this.$nextTick(() {this.refresh true})}}
}
/script三、forceUpdate
组件内置$forceUpdate方法使用前需要在配置中启用。
import Vue from vue
Vue.forceUpdate()templatedivbutton clickhandleUpdateClick()Refresh当前组件/button/div
/template
export default {methods: {handleUpdateClick() {// built-inthis.$forceUpdate()}}
}四、key-changing
原理很简单vue使用key标记组件身份当key改变时就是释放原始组件重新加载新的组件。
templatedivspan :keykey/span/div
/template
scriptexport default {data() {return {key: 0}},methods: {handleUpdateClick() {this.key 1 // 或者 this.key new Date();}}}
/script五、应用场景
vue具有缓存的页面的强制刷新
有些列表页面需要进入详情返回时有缓存功能但是每次进入列表页面又需要刷新列表这种时候就需要手动刷新页面
const routerConfig {path: /List,query: {time: new Date().getTime(),}
};
this.goPath(routerConfig);List.vuecreated () {this.initData();this.preTime Number(this.$route.query.time);
},
activated () {const curTime Number(this.$route.query.time);if(this.preTime ! curTime) {document.documentElement.scrollTop 0;this.preTime curTime;this.listInfo {pageSize: 10,pageContext: ,hasMore: false,list: [],};this.initData();}
},goPath是vue跳转的一个封装
main.js
/*** 根据前端路由跳转到webview* param config* param type inPage: 利用h5路由跳转*/
Vue.prototype.goPath function (routerConfig, type web) {const config routerConfig;// 统一添加参数if (this.$route.query.isSelfManage 1) {config.query.isSelfManage 1;}console.log(config);if (window.__wxjs_environment miniprogram) {if (window.wx) {const params this.$router.resolve(config).href;// 添加参数兼容跳转问题const toUrl ${location.protocol}//${location.host}${location.pathname}${location.search}${params};if (type web) {window.wx.miniProgram.navigateTo({url: /pages/webview/index?url${encodeURIComponent(toUrl)},});} else if (type inPage) {this.$router.push(config);if (!config.replace) {this.$router.push(config);} else {this.$router.replace(config);}} else {window.wx.miniProgram.navigateTo(config);}}} else {if (!config.replace) {this.$router.push(config);} else {this.$router.replace(config);}}
};进入页面输入框自动聚焦
一般情况下加上以下代码就可以聚焦
templatedivinputplaceholder大家都在搜typetextmaxlength500v-modelinputInfo.msgblurresizeViewv-focus/div
/template
scriptexport default {data() {return {inputInfo: { // 输入框对象num: 0, // 字数msg: // 内容},}},watch: {[options.msg] () {let length utils.fancyCount2(this.inputInfo.msg);this.$set(this.inputInfo, num, length);}},directives: {focus: {// 指令的定义inserted: function(el) {el.focus();}}},methods: {/*** input元素失去焦点时触发*/resizeView () {document.body.scrollIntoView(true);},}}
/script但是在有缓存的页面一般就只有第一次会聚焦后面进入都不会聚焦办法就是用第四种强制刷新输入框来聚焦
templatedivinputplaceholder大家都在搜typetextmaxlength500v-modelinputInfo.msgblurresizeViewv-focus:keyinputInfo.focusbutton clickhandleUpdateClick()Refresh当前组件/button/div
/template
scriptexport default {data() {return {inputInfo: { // 输入框对象num: 0, // 字数msg: , // 内容focus: ,},}},activated () {this.inputInfo.focus new Date().getTime();},methods: {handleUpdateClick() {// built-inthis.inputInfo.focus new Date().getTime();}}
/script
