😲동적 레이아웃이 있는 VueJS 페이지!문제와 해결 방안!

나는 현재 한 고객을 위해 대형 점진적 웹 응용 프로그램(PWA)을 개발하고 있다.프런트엔드에서는 VueJS를 Vue 라우터, VueX 및 기타 일부 VueJS 패키지와 함께 사용합니다.
우리는 두 개의 배치부터 시작한다.하나의 레이아웃은 로그인이나 등록 폼이 있는 패턴 레이아웃이다.따라서 배치의 모든 컨텐트는 페이지의 수직 및 수평 중심에 있습니다.우리의 두 번째 포석은 전형적인 응용 포석이다.이 레이아웃에는 탐색 메뉴, 알림, 검색 등의 구성 요소가 포함되어 있습니다.
또한 VueX 및 Axios를 사용하여 백엔드에서 데이터를 가져옵니다.우리는 도구를 위에서 아래로 전달하거나 다른 방향으로 전달할 필요가 없다.만약 필요하다면, 우리는 백엔드 데이터와 방법을 모델링하는 저장소를 가지고 있다.
이제 사용된 기술에 대해 잘 알고 계시기 때문에 VueJS에서 흔히 볼 수 있는 동적 레이아웃 솔루션의 문제점을 토론하겠습니다.

간단한 소개

코드 예시에 대해 나는 3개vue cli 항목을 만들었다.
그것들은 모두 main.js 파일에 다음과 같은 코드 세그먼트를 추가했다.

Vue.mixin({
  created() {
    console.log('[created] ' + this.$options.name)
  },
});

이것은 구성 요소를 생성할 때마다 conols.log() 구성 요소 이름을 표시합니다.VueJS 어셈블리를 생성하는 방법을 쉽게 볼 수 있습니다.mounted()와 detroyed() 연결도 추가할 수 있다.우리의 실험created()으로는 충분하다.

질문 1: 노선 변경 시 재입찰

인터넷에서 동적 레이아웃을 검색할 때, 당신은 많은 해결 방안을 발견할 수 있는데, 그 중에서 가장 흔히 볼 수 있는 것은 아래의 하나이다.App.vue에는 다음 코드가 있습니다.

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

그리고 모든 페이지/보기에 어떤 레이아웃이 있어야 하는지 알려 줍니다.그것은 보통 아래About.vue 구성 요소처럼 보인다.

<template>
  <LayoutB>
    <div class="about">
      <h1>This is an about page</h1>
    </div>
  </LayoutB>
</template>

<script>
import LayoutB from "../layouts/LayoutB";
export default {
  name: "About",
  components: {
    LayoutB
  }
};
</script>

이것은 작용을 할 뿐만 아니라, 우리는 이 방면에서 많이 하지 않기 때문에, 스피드 머신에 아무런 문제가 있다는 것을 발견하지 못할 것이다.
그럼 문제는 뭘까요?이를 위해 예쁜 Vue.Mixin() 조수 함수를 살펴보자.console.log는 다음과 같습니다.

페이지를 불러오면 다음과 같은 창설 순서를 볼 수 있습니다.'App (entry point)' -> 'Home (view/page)' -> 'LayoutA (layout)' -> 'Components'만약 우리가 지금 구성 요소를 어떻게 설정하는지 본다면, 이것은 정확하다.레이아웃 전에 페이지를 불러오는 것은 문제가 될 수 있지만 성능에 큰 영향을 미치지 않습니다.
더 큰 문제는 다음과 같습니다.

전체 레이아웃을 파괴하고 다시 만들고 있습니다.이것은 사용자 인터페이스/사용자 체험을 늦추고 모든 구성 요소를 분리하는 목적을 파괴할 것이다.만약 우리가 그것을 파괴하고 창조한다면, 설령 우리가 이렇게 할 필요가 없다 하더라도.
만약 알림 시스템이 있다면, 페이지를 변경할 때마다 탐지기를 만들 것입니다. 그러면 상황은 더욱 나빠질 것입니다.
이 해결 방안은 어느 정도 가능하다고 해도 만족스럽지 않다.

질문 2: 듀얼 렌더링

이것은 아마도 내가 몇 개의 강좌와 답안에서 찾은 가장 유행하는 해결 방안일 것이다.App.vue 코드는 다음과 같이 변경됩니다.

<template>
  <div id="app">
    <component :is="layout">
      <router-view :layout.sync="layout" />
    </component>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      layout: "div"
    };
  }
};
</script>

우리 About.vue부터 아래 코드까지

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
import LayoutB from "../layouts/LayoutB";
export default {
  name: "About",
  created() {
    this.$emit("update:layout", LayoutB);
  }
};
</script>

여기서 가장 중요한 변화는 sync와$emit 기능이다.현재 우리가 하고 있는 것은 레이아웃 App.vue 구성 요소를 옮기는 것입니다. 보기/페이지 구성 요소는 App.vue 불러올 레이아웃을 알려 줍니다.
마찬가지로 브라우저만 보면 이 해결 방안이 유효하다는 것을 알 수 있습니다!이제 우리 console.log() 출력을 봅시다.
App (entry point) -> 'Home (view/page)' -> 'LayoutA (layout)' -> 'Components' -> 'Home (view/page) again😱 -> Click on Contact link ->'Contact (view/page)
우리는 문제를 하나 해결했다.현재, 포석은 매번 노선이 바뀔 때마다 파괴되고 재창설되지 않지만, 우리도 새로운 문제를 만들었다!
새 배치가 표시될 때마다 페이지/뷰가 작성되고 제거된 다음 다시 작성됩니다.이것은 우리 상점에 문제가 생길 수 있다.
구성 요소에 fetch() 함수가 목록을 불러올 때, 이 fetch() 함수는 한 번이 아니라 핑 서버를 두 번 불러옵니다.지금 상상해 보세요. 백엔드에 캐시가 없습니다. 복잡한 계산이 두 번 실행되고 있습니다.
또한 상점에서 중복된 데이터를 얻었는지 확인하지 않으면 목록에서 모든 내용을 두 번 볼 수 있습니다.
마찬가지로 우리의 예시에서 Home는 LayoutA 이전에 나타났다.
이것은 단지 이 해결 방안에 나타날 수 있는 문제일 뿐이다.
이런 방법도 우리 문제를 해결하는 좋은 방법이 아니다.

해결 방안: 우리의 노선에서 원 대상을 사용한다

우리는 다시 한 번 바꿔야 한다App.vue.

<template>
  <div id="app">
    <component :is="this.$route.meta.layout || 'div'">
      <router-view />
    </component>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

우리 About.vue 지금 이렇게 보여요.

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
export default {
  name: "About"
};
</script>

그래서 페이지가 어떤 레이아웃을 보여줄지 모른다.
그러나 이 정보는 현재 어디에 저장됩니까?
우리 router/index.js 파일에서!

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'
import LayoutA from '../layouts/LayoutA.vue'
import LayoutB from '../layouts/LayoutB.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { layout: LayoutA }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { layout: LayoutB }
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact,
    meta: { layout: LayoutA }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

각 노선의 정의에서 여기서 가장 중요한 줄은 meta: { layout: LayoutA }이다.
우리 console.log() 출력을 다시 봅시다.
App (entry point) -> LayoutA (layout) -> Components from the Layout -> Home (view/page)괜찮아 보여요.우리는 마침내 이중 과장이 없는 정확한 순서가 생겼다.
또한 노선을 변경하지 않아도 레이아웃을 파괴하거나 만들지 않고 변경할 수 있습니다.
이 해결 방안을 실현한 후에 우리는 응용 프로그램이 더욱 원활하고 느낌이 더욱 좋다는 것을 느낄 수 있다.설령 네 눈을 사용한다고 해도 너는 그것을 볼 수 없다.단지 매끄러운 것 자체가 큰 장점이다.
그리고 불필요한 요청으로 우리 서버를 공격하지 마세요!API 엔드포인트에 대한 몇 가지 제한을 줄일 수 있습니다.
최종 사용자부터 이해관계자, 그리고 실제 개발자까지 이 패치는 모든 사람에게 승리이다.

Git 재구매 코드

나는 두 개의 문제가 있는 프로젝트와 우리가 채택한 해결 방안을 찾을 수 있는 환매 협의를 만들었다
LINK
**이 내용을 좋아하신다면 심장이나 유니콘을 클릭하세요!
잠시 후에 읽고 싶으면 유니콘 아래 책갈피 버튼을 클릭하세요**
👋인사하다Medium | |