집 > 기사 > 웹 프론트엔드 > Vue 실무 프로젝트의 공통 지식 요약

Vue 실무 프로젝트의 공통 지식 요약

php中世界最好的语言원래의: 2018-05-04 09:24:388810검색

이번에는 Vue 실무 프로젝트에서 일반적으로 사용되는 지식 포인트를 요약해 보겠습니다. Vue 실무 프로젝트의 노트는 무엇입니까?

[관련 추천: vue 인터뷰 질문 (2020)]

vue의 기본 원리는?

vue 구성 요소 간의 통신?

JS에서 데이터 유형을 결정하는 방법은 몇 가지가 있습니까?

가장 일반적인 결정 방법: typeof

알려진 객체의 유형을 결정하는 방법: 인스턴스of

구성자를 기준으로 판단합니다. object: constructor

무적이며 전능한 메서드 ：jquery.type()

vue와 각도의 차이점은 무엇입니까?

1.vue는 mvvm의 뷰 레이어일 뿐이며 jquery와 같은 도구 라이브러리가 아닙니다. 프레임워크인 반면 각도는 mvvm 프레임워크입니다.
2. Vue의 양방향 결합은 ES5의 3. getter/setter를 기반으로 구현되는 반면, Angle은 소위 "더티" 검사가 필요한 자체 템플릿 컴파일 규칙 세트를 구현하지만 vue는 그렇지 않습니다. 따라서 성능면에서는 Vue가 더 효율적이지만 IE9 이하의 브라우저에서는 지원이 불가능하다는 가격이 있습니다.
4.vue는 인스턴스화를 위해 el 개체를 제공해야 하며 모든 후속 범위도 el 개체 아래에 있는 반면 각도는 전체 HTML 페이지입니다. 페이지에는 여러 Vue 인스턴스가 있을 수 있지만 Angular는 이런 방식으로 작동하지 않는 것 같습니다.
5.vue는 시작하기가 정말 쉽고 학습 비용도 상대적으로 낮습니다. 그러나 공식 문서는 상대적으로 간단하고 포괄적인 사용 사례가 부족합니다. 고급 사용법을 위해서는 적어도 지금은 소스 코드를 직접 연구해야 합니다.

Angular Dirty Check에 대한 이해를 알려주세요.

Angular에서는 데이터가 변경되었는지 여부를 알 수 없으므로 이러한 조건을 트리거하면 감지를 수행하여 모든 데이터를 순회하고 변경된 위치를 비교한 다음 변경 사항을 구현합니다.
이 테스트는 매우 비과학적입니다. 그리고 효율도 높지 않고, 중복되는 곳이 많아 정식으로 더티 체크라고 부릅니다.

active-class는 어떤 구성 요소의 속성인가요?

vue-router 모듈의 라우터 링크 구성 요소입니다.

중첩 라우팅을 정의하는 방법은 무엇입니까?

실제 프로젝트에서는 여러 계층의 중첩 구성요소를 접하게 되지만 중첩 라우팅을 어떻게 구현합니까? 따라서 VueRouter의 매개변수에 하위 구성을 사용해야 경로 중첩이 잘 구현될 수 있습니다.

index.html에는 라우팅 아웃렛

<p id="app"> 
  <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> 
  <router-view></router-view> 
</p>

main.js가 하나만 있습니다. 리디렉션은 홈 구성 요소를 가리키고 리디렉션 지점은 페이지가 로드되자마자 홈 구성 요소를 표시합니다. 경로와 일치해야 합니다. 물론 하위 경로 안에 하위 경로가 중첩될 수도 있습니다.

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter) 
//引入两个组件 
import home from "./home.vue" 
import game from "./game.vue" 
//定义路由 
const routes = [ 
  { path: "/", redirect: "/home" },//重定向,指向了home组件 
  { 
    path: "/home", component: home, 
    children: [ 
      { path: "/home/game", component: game } 
    ] 
  } 
] 
//创建路由实例 
const router = new VueRouter({routes}) 
new Vue({ 
  el: '#app', 
  data: { 
  }, 
  methods: { 
  }, 
  router 
})

home.vue에서 표시를 클릭하면 하위 경로가 표시됩니다. 하위 경로의 출구는 상위 경로에 있어야 합니다. 그렇지 않으면 하위 경로가 표시될 수 없습니다.

<template> 
  <p> 
    <h3>首页</h3> 
    <router-link to="/home/game"> 
      <button>显示<tton> 
    </router-link> 
    <router-view></router-view> 
  </p> 
</template>

game.vue

 <template> 
  <h3>游戏</h3> 
</template>

vue-router의 동적 라우팅을 정의하는 방법은 무엇입니까? 전달된 동적 매개변수를 얻는 방법은 무엇입니까?

라우터 디렉터리의 index.js 파일에서 경로 속성에 /:id를 추가하세요.

라우터 객체의 params.id를 사용하세요.

vue-router에는 어떤 종류의 탐색 후크가 있나요?

세 가지 유형,

첫 번째: 전역 탐색 후크입니다: router.beforeEach(to,from,next), 해당 기능은 점프하기 전에 판단하고 차단하는 것입니다.
두 번째 유형: 컴포넌트 내 후크
세 번째 유형: 전용 컴포넌트를 별도로 라우팅

scss란 무엇인가요? vue.cli의 설치 및 사용 단계는 무엇입니까? 주요 기능은 무엇입니까?

CSS 사전 컴파일.

사용 단계:

1단계: npm을 사용하여 3개의 로더(sass-loader, css-loader, node-sass)를 다운로드합니다.

2단계: 빌드 디렉터리에서 webpack.base.config를 찾습니다. Node.js에서 확장 속성에 확장자.scss를 추가하세요

3단계: 여전히 같은 파일에서 모듈 속성을 구성하세요

4단계: 그런 다음 구성 요소의 스타일 태그에 lang 속성을 추가하세요. 예: lang=" scss”

주요 기능은 무엇인가요?

1. ($변수 이름 = 값)과 같은 변수를 사용할 수 있습니다.
2. 중첩할 수 있습니다. 민트유 이게 뭐야? 사용하는 방법? 구성 요소를 사용하는 방법을 세 가지 이상 나열해 보세요.

Vue 기반 프런트엔드 구성 요소 라이브러리. npm 설치 후 스타일과 js 가져오기, vue.use(mintUi)가 전역적으로 도입됩니다. 단일 구성 요소에 로컬로 도입되었습니다. 'mint-ui'에서 {Toast}를 가져옵니다.

구성요소 1: 토스트('로그인 성공');

구성요소 2: mint-header;

구성요소 3: mint-swiper

v-model이 무엇인가요? 사용하는 방법? vue의 태그에 이벤트를 바인딩하는 방법은 무엇입니까?

양방향 바인딩, 명령(v-class, v-for, v-if, v-show, v-on)을 구현할 수 있습니다. Vue 모델 레이어의 데이터 속성입니다. 바인딩 이벤트:

iframe의 장점과 단점은 무엇인가요?

iframe은 삽입된 프레임이라고도 합니다. 삽입된 프레임은 프레임이 있는 웹 페이지와 유사하며 웹 페이지의 프레임과 콘텐츠를 기존 웹 페이지에 삽입할 수 있습니다.

장점:

아이콘, 광고 등 타사 콘텐츠가 느리게 로드되는 로딩 문제 해결

보안 샌드박스

병렬 로딩 스크립트

내비게이션 바 생성이 편리함

단점:

iframe이 Onload를 차단합니다. 메인 페이지의 이벤트

인스턴트 콘텐츠가 비어 있고 로드하는 데 시간이 걸립니다.

의미 없음

Sass와 Less를 간략하게 설명하고 차이점을 설명해주세요.

동적 스타일 언어, CSS 전처리기, CSS의 추상화 레이어입니다. 특수 구문/언어를 사용하여 CSS로 컴파일됩니다.

변수 기호는 다릅니다. less는 @이고 Sass는 $입니다.

Sass는 조건문을 지원하며 if{}else{}, for{} 루프 등을 사용할 수 있습니다. Less는 이를 지원하지 않습니다.

Sass는 Ruby를 기반으로 하며 서버 측에서 처리되는 반면 Less는 Less 코드를 처리하고 Css를 브라우저에 출력하기 위해 less.js를 도입해야 합니다

axios가 무엇인가요? 사용하는 방법? 로그인 기능을 구현하기 위해 이를 사용하는 프로세스를 설명하시겠습니까?

백그라운드 리소스를 요청하는 모듈입니다. npm install axios -S가 설치된 후 도메인 간에 전송되면

구성 파일

의 config/index.js에서 설정해야 합니다. 배경이 Tp5인 경우

리소스 경로를 정의하세요. js에서 import를 사용한 다음 .get 또는 .post를 사용하세요. 성공하면 .then 함수로 반환하고, 실패하면 .catch 함수로 반환합니다. axios+tp5 발전에서 axios.post('api/user)를 호출하는 동작은 무엇인가요? ')? axios.put('api/user/8')은 어떻습니까?

교차 도메인, 사용자 작업 추가, 작업 업데이트.

vuex란 무엇인가요? 사용하는 방법? 어떤 기능적 시나리오에서 이를 사용합니까?

vue 프레임워크의 상태 관리. main.js에 store를 도입하고 주입합니다. 새 디렉터리 저장소가 생성되고...내보내집니다. 시나리오에는 다음이 포함됩니다. 단일 페이지 애플리케이션의 구성 요소 간 상태. 음악 재생, 로그인 상태, 장바구니에 추가

mvvm 프레임워크란 무엇인가요? 다른 프레임워크(jquery)와 차이점은 무엇인가요? 어떤 시나리오가 적합합니까?

A 모델+뷰+뷰모델 프레임워크, 데이터 모델 모델, viewModel은 두 개를 연결합니다.

차이: Vue 데이터 기반, 노드 작업 대신 데이터를 통해 뷰 레이어를 표시합니다.

시나리오: 데이터 연산이 많은 시나리오가 더 편리해요

지침(v-check, v-focus)을 사용자 정의하는 방법은 무엇인가요? 어떤 후크 기능이 있나요? 또 어떤 Hooks

기능 매개변수

가 있나요?

전역적으로 정의된 지시문: vue 객체의 지시문 메서드에는 두 개의 매개변수가 있습니다. 하나는 지시문 이름이고 다른 하나는 함수입니다. 구성 요소에 정의된 지침: directives

Hook 기능: 바인딩(바인딩 이벤트에 의해 트리거됨), 삽입(노드 삽입 시 트리거됨), 업데이트(구성 요소 내 관련 업데이트)

Hook 기능 매개 변수: el, 바인딩

이름 최소 4 vue의 지침과 사용법은 무엇입니까?

v-if: 숨길지 여부를 결정합니다. v-bind:class: 속성을 바인딩합니다.

vue-router가 무엇인가요? 어떤 구성요소가 있나요?

vue는 라우팅 작성에 사용되는 플러그인입니다. router-link 및 router-view

의 탐색 후크는 무엇입니까? 어떤 매개변수가 있나요?

탐색 후크에는 다음이 포함됩니다.

a/전역 후크 및 구성 요소 전용 후크. b/beforeRouteEnter, afterEnter, beforeRouterUpdate, beforeRouteLeave

매개변수:

To(갈 경로), from(떠날 경로), next(이 기능은 다음 경로로 이동하는 데 사용해야 하며 그렇지 않은 경우 차단합니다. 사용) 가장 일반적으로 사용되는 것입니다

Vue의 양방향 데이터 바인딩의 원리는 무엇입니까?

vue.js는 게시자-구독자 모델과 결합된 데이터 하이재킹을 사용합니다. 이는 Object.defineProperty()를 사용하여 각 속성의 setter 및 getter를 하이재킹하며, 데이터가 변경되면 구독자에게 메시지를 게시하고 해당 모니터링을 트리거합니다. 콜백.

구체적인 단계:

1단계: 관찰의 데이터 객체는 하위 속성 객체의 속성을 포함하여 재귀적으로 순회해야 하며 setter 및 getter가 추가됩니다.
이 경우 특정 2단계: 컴파일은 템플릿 지침을 구문 분석하고 템플릿의 변수를 데이터로 바꾼 다음 렌더링 페이지 보기를 초기화하고 업데이트 기능을 바인딩합니다. 각 명령에 해당하는 노드에 구독자를 추가하여 데이터를 모니터링합니다. 데이터가 변경되면 알림을 받고 뷰를 업데이트합니다.

3단계: Watcher 구독자는 Observer와 Compile 간의 통신을 연결하는 역할을 합니다. :

1. 변환 시 속성 구독자(dep)에 자신을 추가합니다.

2. update() 메서드가 있어야 합니다.
3 속성 변경에 대한 알림을 받을 때 호출할 수 있습니다. 자신의 update() 메소드를 실행하고 콜백을 바인딩하면 완료됩니다.

4단계: MVVM은 데이터 바인딩의 시작으로 Observer, Compile 및 Watcher를 통합하고 Observer를 사용하여 자체 모델 데이터의 변경 사항을 모니터링하고 Compile을 사용하여 템플릿 지침을 구문 분석 및 컴파일하고 마지막으로 Watcher를 사용하여 Observer 간의 연결을 구축합니다. 이들 간의 통신 브리지는 데이터 변경 -> 업데이트 보기, 대화형 변경 사항 보기(입력) -> 데이터 모델 변경의 양방향 바인딩 효과를 달성합니다.

vuelifecycle에 대해 어떻게 이해하고 있는지 자세히 설명해 주세요. 총 8단계: 생성 전/후, 로드 전/후, 업데이트 전/후, 파괴 전/후

생성 전/후: beforeCreated 단계에서 vue 인스턴스 $el의 마운팅 요소 데이터 개체 데이터는 모두 정의되지 않았으며 아직 초기화되지 않았습니다. 생성 단계에서는 vue 인스턴스의 데이터 객체 데이터를 사용할 수 있지만 $el은 사용할 수 없습니다.

로딩 전/후: beforeMount 단계에서 vue 인스턴스의 $el 및 데이터가 초기화되지만 이전의 가상 dom 노드는 여전히 마운트되어 있고 data.message는 교체되지 않았습니다. Mounted 단계에서는 vue 인스턴스가 마운트되고 data.message가 성공적으로 렌더링됩니다.

업데이트 전/후: 데이터가 변경되면 beforeUpdate 및 업데이트된 메소드가 트리거됩니다.

파기 전/후: destroy 메소드를 실행한 후 데이터 변경으로 인해 더 이상 주기적 기능이 트리거되지 않습니다. 이는 vue 인스턴스가 이벤트 모니터링 및 DOM 바인딩을 해제했음을 나타내지만 dom 구조는 여전히 존재합니다

Vue 컴포넌트를 캡슐화하는 과정을 알려주세요. 우선, 컴포넌트는 전체 프로젝트의 개발 효율성을 향상시킬 수 있습니다. 이는 페이지를 상대적으로 독립적인 여러 모듈로 추상화하여 전통적인 프로젝트 개발의 문제(낮은 효율성, 어려운 유지 관리, 재사용성 및 기타 문제)를 해결합니다.

그런 다음 Vue.extend 메소드를 사용하여 컴포넌트를 생성한 다음 Vue.comComponent 메소드를 사용하여 컴포넌트를 등록합니다. 하위 구성 요소에는 데이터가 필요하며 props에서 정의를 허용할 수 있습니다. 하위 구성 요소는 데이터를 수정한 후 해당 데이터를 상위 구성 요소에 전달하려고 합니다. Emit 메소드를 사용할 수 있습니다.

vuex를 어떻게 알게 되셨나요? vuex는 개발 모델이나 프레임워크로 이해될 수 있습니다. 예를 들어 PHP에는 thinkphp가 있고 Java에는 spring이 있습니다.

상태(데이터 소스)를 통해 드라이버 구성 요소의 변경 사항을 중앙에서 관리합니다(예: 중앙에서 Bean을 관리하는 Spring의 IOC 컨테이너).

애플리케이션 수준 상태는 스토어에 집중되어 있습니다. 상태를 변경하는 방법은 비동기식 로직을 액션에 캡슐화해야 하는 돌연변이를 제출하는 것입니다.

vue-loader가 무엇인가요? 그것을 사용하는 용도는 무엇입니까?

.vue 파일을 구문 분석하고 템플릿/js/스타일을 js 모듈로 변환하는 로더입니다.

사용법: js는 es6으로 작성할 수 있고, 스타일은 scss 이하로 할 수 있고, 템플릿은 jade로 추가할 수 있습니다.

vue.cli 프로젝트의 src 디렉토리에 있는 각 폴더와 파일의 사용법을 알려주세요.

자산 폴더는 정적 리소스용이고, 라우터는 라우팅 관련 구성을 정의하기 위한 것입니다. main.js는 항목 파일입니다. .cli 정의된 구성 요소? 어떤 문제가 발생했나요?

1단계: 구성 요소 디렉터리에 구성 요소 파일(smithButton.vue)을 만듭니다. 스크립트는 기본값을 내보내야 합니다. {

2단계: 필요한 페이지(구성 요소)로 가져오기: '../Components/smithButton에서 smithButton을 가져옵니다. .vue'

3단계: 이를 vue의 하위 구성 요소인 구성 요소의 구성 요소 속성에 삽입합니다:{smithButton}

4단계: 템플릿 보기에서 사용합니다.

문제는 smithButton이라는 이름을 사용하면 smith-button이라는 것입니다.

Vue.js 템플릿 컴파일에 대한 이해에 대해 이야기해 주세요.

간단히 말하면, 먼저 AST 트리로 변환한 후, 얻은 렌더 함수가 VNode(Vue의 가상 DOM 노드)를 반환합니다.

세부 단계: 먼저, 컴파일 컴파일러를 통해 템플릿을 AST로 컴파일합니다. 구문 트리(추상 구문 트리는 소스 코드의 추상 구문 구조를 트리로 표현한 것임), compile은 createCompiler의 반환 값이고 createCompiler는 컴파일러를 생성하는 데 사용됩니다. 또한 컴파일은 옵션 병합도 담당합니다.

그런 다음 AST는 생성(AST 구문 트리를 렌더링 함수 문자열로 변환하는 프로세스)을 통해 렌더링 함수를 가져옵니다. 렌더링의 반환 값은 VNode입니다. Vue는 다음을 포함합니다. 이름, 하위 노드, 텍스트 등)

vue의 역사 history 기록에는 앞으로 또는 뒤로 몇 단계가 있습니까?

vuejs,Angularjs 및 React의 차이점은 무엇입니까? 1. 차이점

AngularJS와의 유사점:

두 지침 모두 기본 제공 지침과 사용자 지정 지침을 지원합니다.

둘 다 필터를 지원합니다: 내장 필터와 사용자 정의 필터.

둘 다 양방향 데이터 바인딩을 지원합니다.

저사양 브라우저는 지원하지 않습니다.

차이점:

1. AngularJS는 종속성 주입 기능 추가 등 학습 비용이 높은 반면, Vue.js 자체에서 제공하는 API는 비교적 간단하고 직관적입니다.

2. 성능 측면에서 AngularJS는 데이터 확인에 의존하므로 감시자가 많을수록 속도가 느려집니다.

Vue.js는 종속성 추적 기반 관찰을 사용하고 비동기 대기열 업데이트를 사용합니다. 모든 데이터는 독립적으로 트리거됩니다.

대규모 애플리케이션의 경우 이러한 최적화 차이는 매우 분명합니다.

2. React와의 차이점

유사점:

React는 특수 JSX 구문을 사용하며 Vue.js는 구성 요소 개발 시 .vue 특수 파일 형식 작성을 권장하며 파일 내용에 대한 몇 가지 규칙이 있으며 둘 다 컴파일 후 사용합니다. .

핵심 아이디어는 동일합니다. 모든 것이 구성 요소이고 구성 요소 인스턴스가 중첩될 수 있다는 것입니다.

모두 합리적인 후크 기능을 제공하므로 개발자가 필요에 따라 맞춤 설정할 수 있습니다.

핵심 패키지에는 AJAX, Route 및 기타 기능이 내장되어 있지 않지만 플러그인으로 로드됩니다.

구성 요소 개발에서 믹스인 기능을 지원합니다.

차이:

React는 Virtual DOM을 사용하는 반면 Vue.js는 DOM 템플릿을 사용합니다. React에서 사용하는 Virtual DOM은 렌더링된 결과에 대해 더티 검사를 수행합니다.

Vue.js는 DOM을 매우 편리하고 빠르게 운용할 수 있는 명령어, 필터 등을 템플릿에 제공합니다.

vue 라이프사이클 인터뷰 질문

vue 라이프사이클이란 무엇인가요?

Vue 인스턴스의 생성부터 소멸까지의 과정이 생명주기입니다. 즉, 생성 시작, 데이터 초기화, 템플릿 컴파일, Dom 마운트 → 렌더링, 업데이트 → 렌더링, 제거 등 일련의 프로세스를 Vue의 수명주기라고 합니다.

Vue 라이프사이클의 역할은 무엇인가요?

라이프 사이클에 여러 이벤트 후크가 있어 전체 Vue 인스턴스의 프로세스를 제어할 때 좋은 논리를 더 쉽게 형성할 수 있습니다.

Vue 수명 주기에는 몇 단계가 있나요?

생성 전/후, 로드 전/후, 업데이트 전/후, 파괴 전/후 총 8단계로 나눌 수 있습니다.

첫 번째 페이지 로드 시 어떤 후크가 실행되나요?

페이지가 처음 로드될 때 beforeCreate,created,beforeMount,mount 후크가 트리거됩니다.

DOM 렌더링은 어느 주기에서 완료되나요?

DOM 렌더링이 마운트 완료되었습니다.

각 사이클이 어떤 시나리오에 적합한지 간략하게 설명해주세요.

라이프 사이클 후크를 사용하는 몇 가지 방법: beforecreate: 인스턴스가 생성될 때 트리거되는 로딩 이벤트를 여기에 추가할 수 있습니다. 로딩 이벤트가 여기에 끝나면 여기에 기록됩니다. , 비동기 요청도 적합합니다. 여기에서 Mounted가 호출됩니다. 요소를 마운트하고 DOM 노드를 업데이트합니다. 데이터가 균일하게 처리되면 여기에 해당 함수를 작성합니다. beforeDestroy: 중지 이벤트를 확인하는 확인 상자를 만들 수 있습니다. nextTick: 작동 데이터를 업데이트한 직후의 dom

인수는 유사 배열이고 순회 인터페이스가 없으며 순회할 수 없습니다

cancas와 SVG의 정의 및 차이점

SVG

SVG는 다음을 사용하는 언어입니다. 2D 그래픽을 설명하는 XML입니다.
SVG는 XML을 기반으로 하며 이는 SVG DOM의 모든 요소를 사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.
SVG에서는 그려진 모든 모양이 객체로 간주됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.

Canvas

Canvas는 JavaScript를 사용하여 2D 그래픽을 그립니다.
캔버스는 픽셀 단위로 렌더링됩니다.
캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 끌 수 없습니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.

Canvas와 SVG 비교

Canvas

해상도에 따라 다름
이벤트 핸들러 지원 안됨
약한 텍스트 렌더링 기능
결과 이미지를 .png 또는 .jpg 형식으로 저장하는 기능
이미지 집약적인 게임에 가장 적합, 이러한 객체 중 다수는 자주 다시 그려집니다

SVG

해상도에 의존하지 않음
이벤트 핸들러 지원
대규모 렌더링 영역이 있는 애플리케이션에 이상적(예: Google 지도)
복잡성이 높으면 렌더링 속도가 느려짐(DOM을 과도하게 사용하는 모든 애플리케이션 빠르지 않습니다)
게임 응용 프로그램에는 적합하지 않습니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!