文章目录简介：刷新整个页面2、使用v-if标记3、自动聚焦到forceUpdate、key-changing和包含APP应用程序场景vue缓存的页面的强制刷新页面输入框
前言Vue的双向绑定属于自动； 在某些情况下，必须手动触发“更新”操作。 目前有四种方案可供选择：
刷新整个页面(最低的，有route机制的；使用v-if标记的；相对较低的；使用内置的forceUpdate方法)更好的密钥更改优化器已知如果使用router.go(0)0(刷新整个页面)二、v-的v-if的值发生变化，组件将重新渲染。 因此，可以利用v-if指令的特性强制刷新组件。
templatecompv-if=' refresh '/comp button @ click=' refresh comp () ' comp组件/button/刷新templatescriptimportcompfrom'@的comp.vue ' export default { name : ' parent comp '，data () return ) refresh 3360 methods:{refreshcomp(}(/删除组件this.refresh=false //) /删除组件后，重新渲染组件//this.$nextTick this.$nextTick (() this.refresh=true ) } }}/script三、forceUpdate组件具有内置的$forceUpdate方法，可在使用前在配置中启用
importvuefrom ' vue ' vue.force update (templatedivbutton @ click=' handleupdateclick ) ) Refresh当前组件/button /div/templateexportdefault (methods : ) handleupdateclick () { //built-in this.$forceUpdate ) } 4，密钥更改
templatedivspan : key=' key '/span/div/templatescriptexportdefault { data } { return { key 3360 }， methods33660} } } }/script五、强制更新APP应用程序场景vue中有缓存的页面如果需要访问某些列表页面并返回详细信息，则具有缓存功能，但每次访问列表页面时都需要更新列表
constrouterconfig={ path : '/list '，query: { time: new Date ().getTime )，}； this.gopath(routerconfig )； list.vuecreated((this.initdata ) )； this.pretime=number (this.$ route.query.time )； }，activated((constcurtime=number ) this.$route.query.time )； if(this.pretime！==curtime (document.documentelement.scroll top=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); } }}; 进入页面输入框自动聚焦一般情况下，加上以下代码就可以聚焦
<template> <div> <inputplaceholder="大家都在搜" type="text" maxlength="500" v-model="inputInfo.msg" @blur="resizeView" v-focus > </div></template><script> export 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>但是在有缓存的页面，一般就只有第一次会聚焦，后面进入都不会聚焦，办法就是用第四种强制刷新输入框来聚焦
<template> <div> <inputplaceholder="大家都在搜" type="text" maxlength="500" v-model="inputInfo.msg" @blur="resizeView" v-focus :key="inputInfo.focus" > <button @click="handleUpdateClick()">Refresh当前组件</button> </div></template><script> export default { data() { return { inputInfo: { // 输入框对象 num: 0, // 字数 msg: '', // 内容 focus: '', }, } }, activated () { this.inputInfo.focus = new Date().getTime(); }, methods: { handleUpdateClick() { // built-in this.inputInfo.focus = new Date().getTime(); } }</script>