Схема принудительного обновления компонента Vue

Предисловие:
Двусторонняя привязка Vue является автоматической, при определенных обстоятельствах необходимо вручную запустить операцию «обновления».В настоящее время есть четыре варианта на выбор:

1. Обновить всю страницу (самая нижняя, можно использовать механизм роута)
2. Используйте тег v-if (сравнительно низкий)
3. Используйте встроенный метод forceUpdate (лучше)
4. Оптимизация компонентов с изменением ключа (лучшее)

обновить всю страницу

this.$router.go(0);
window.location.reload();

Используйте тег v-if

Если необходимо обновить подкомпонент, это можно реализовать с помощью инструкции v-if. Мы знаем, что при изменении значения v-if компонент будет перерисовываться. Следовательно, цель принудительного обновления компонентов может быть достигнута с помощью характеристик инструкции v-if.

<template>
    <comp v-if="refresh"></comp>
    <button @click="refreshComp()">刷新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>

Анализ процесса:
1. Во время инициализации значение Refresh истинно, и компонент рендерится;
2. Когда мы вызываем refreshComp, refreshComp сразу же становится ложным;
3. В это время компонент останавливает рендеринг, потому что значение ложно;
4 , Затем nextTick Установите значение обновления обратно, и компонент перерисовывается.

В вышеописанном процессе есть два важных момента, которые нужно понимать: 1. Его нужно менять после nextTick, иначе эффекта не будет видно.В Vue
цикл обновления DOM — это тик, и Vue будет собирать в этот же тик Change , а затем в конце тика узел будет обновлен в соответствии с измененным значением.Если мы не дождемся следующего
тика и сразу обновим значение переменной, обновление узла не будет запущено.
2. При повторном рендеринге Vue создаст новый компонент. Повторное создание новых перед уничтожением Vue означает, что новые компоненты снова пройдут жизненный цикл.

принудительное обновление

Компонент имеет встроенный метод $forceUpdate, который необходимо включить в конфигурации перед использованием.

import Vue from 'vue'
Vue.forceUpdate()

<template>
  <div>
    <button @click="handleUpdateClick()">Refresh当前组件</button>
  </div>
</template>
export default {
    
    
  methods: {
    
    
    handleUpdateClick() {
    
    
      // built-in
      this.$forceUpdate()
    }
  }
}

forceUpdate принудительно обновит только страницу, а не существующие вычисляемые свойства.

смена ключей

Принцип прост. Vue использует ключ для идентификации компонента. Когда ключ изменяется, исходный компонент освобождается, а новый компонент перезагружается.

<template>
  <div>
    <span :key="componentKey"></span>
  </div>
</template>
<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        componentKey: 0
      }
    },
    methods: {
    
    
     forceRerender() {
    
    
        this.componentKey += 1 // 或者 this.componentKey = new Date();
      }
    }
  }
</script>

Войдите в поле ввода страницы, чтобы автоматически сфокусироваться.
В общем, добавьте следующий код, чтобы сфокусироваться

<template>
  <div>
    <input
		placeholder="大家都在搜"
	    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>
    <input
		placeholder="大家都在搜"
	    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>