Heim > Artikel > Web-Frontend > So lösen Sie das Aktualisierungsproblem der teilweisen Aktualisierungskomponente der Vue3-Seite
Der Lebenszyklus von vue3 und der Lebenszyklus von vue2 sind völlig unterschiedlich
I Hier ist eine kurze Einführung in den Unterschied zwischen den beiden. 🎜🎜#
Die alte Options-API teilt verschiedene Attribute im Code auf: Daten, berechnete Attribute, Methoden usw. Die neue synthetische API ermöglicht uns eine Segmentierung nach Funktion, im Vergleich zur alten API, die Attribute zum Gruppieren verwendet, .
vue2export default { props: { title: String, }, data() { return { username: "", password: "", }; }, methods: { login() { //登录axios请求处理 }, }, components: { buttonComponent: btnComponent, }, computed: { fullName() { return this.firstName + " " + this.lastName; }, }, };
这样代码会更加简便和整洁
vue3export default { props: { title: String, }, setup() { const state = reactive({ //数据 username: "", password: "", lowerCaseUsername: computed(() => state.username.toLowerCase()), //计算属性 }); //方法 const login = () => { //登录axios请求处理 }; return { login, state, }; }, };
Vue2--------------vue3 beforeCreate -> setup() created -> setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted activated -> onActivated deactivated -> onDeactivated
onUpdated(): Funktion wird ausgeführt, nachdem die Komponentenaktualisierung abgeschlossen ist.
onBeforeUnmount(): Funktion wird ausgeführt, bevor die Komponente ausgehängt wird.
onUnmount(): Funktion, die ausgeführt wird, nachdem die Komponente nicht gemountet wurde.
Wenn die Komponente enthalten ist, werden die folgenden zwei Hook-Funktionen hinzugefügt.
onActivated(): Die in enthaltenen Komponenten verfügen über zwei weitere Lebenszyklus-Hook-Funktionen. Wird bei Aktivierung ausgeführt.
onDeactivated(): Wenn beispielsweise von Komponente A zu Komponente B gewechselt wird, wird es ausgeführt, wenn Komponente A verschwindet.
Komm auf den Punkt und löse das heutige Problem
Code
<template> <div id="app"> <nav-View v-show="login" /> <router-view v-if="isRouterAlive" /> <!-- 进行v-if判断 --> <foot-View v-show="login" /> </div> </template> <script> import navView from "@/components/navView.vue"; import footView from "@/components/footer.vue"; import { onMounted, ref, watch ,nextTick,provide,} from "vue";//要引入方法 import { useRouter } from "vue-router"; export default { name: "app", components: { navView, footView, }, created() { console.log("123", this.$route.path); }, setup() { // 局部组件刷新 const isRouterAlive = ref(true); const reload = () => { isRouterAlive.value = false; nextTick(() => { isRouterAlive.value = true; }); }; provide("reload", reload); return { isRouterAlive, }; }, watch: { }, }; </script> <style> * { margin: 0px; } #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } </style>
Der nächste Schritt ist die Unterkomponente (Paginierungsaufruf)
Code:
<template> <div> <!-- input框输入值,点击按钮,看值会不会清空 --> <input type="text"> </div> <button @click="refresh">页面刷新</button> </template> <script> import { inject } from "vue"; export default{ setup() { const refresh = inject("reload"); //在方法体中的调用方法 // refresh(); return { refresh, }; }, }; </script>
Das obige ist der detaillierte Inhalt vonSo lösen Sie das Aktualisierungsproblem der teilweisen Aktualisierungskomponente der Vue3-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!