vue3의 라이프사이클과 vue2의 라이프사이클은 완전히 다릅니다
여기서는 둘의 차이점을 간략하게 소개하겠습니다
Vue2와 Vue3의 가장 큰 차이점 : Vue2 옵션 API(Options API) 대 Vue3 Composition API 사용
이전 옵션 API는 코드에서 데이터, 계산된 속성, 메서드 등 다양한 속성을 분할합니다. 새로운 복합 API를 사용하면 속성을 사용하여 그룹화하는 이전 API와 비교하여 기능별로 세분화할 수 있습니다. 这样代码会更加简便和整洁
export default { props: { title: String, }, data() { return { username: "", password: "", }; }, methods: { login() { //登录axios请求处理 }, }, components: { buttonComponent: btnComponent, }, computed: { fullName() { return this.firstName + " " + this.lastName; }, }, };
export 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
onBeforeMount()입니다: 컴포넌트가 노드에 마운트되기 전에 실행되는 함수입니다.본론으로 들어가 오늘의 문제를 해결해 봅시다Code먼저 app.vue를 수정해야 합니다Code:
onMounted(): 구성요소가 마운트된 후 실행되는 함수입니다.
onBeforeUpdate(): 구성 요소가 업데이트되기 전에 실행되는 함수입니다.
onUpdated(): 구성 요소 업데이트가 완료된 후 실행되는 함수입니다.
onBeforeUnmount(): 구성 요소가 마운트 해제되기 전에 실행되는 함수입니다.
onUnmounted(): 컴포넌트 언마운트 완료 후 실행되는 함수
컴포넌트가 포함된 경우 다음 두 가지 Hook 함수가 추가됩니다.
onActivated(): 포함된 구성 요소에는 두 가지 수명 주기 후크 기능이 더 있습니다. 활성화되면 실행됩니다.
onDeactivated(): 예를 들어 컴포넌트 A에서 컴포넌트 B로 전환하는 경우 컴포넌트 A가 사라질 때 실행됩니다.
<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>
<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>
위 내용은 Vue3 페이지 부분 새로 고침 구성 요소의 새로 고침 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!