[편집 및 공유] 일반적인 Vue 인터뷰 질문 몇 가지(답변 분석 포함)

이번에는 Vue에 대한 일반적인 인터뷰 질문을 공유하여 기본 지식을 정리하고 Vue 지식 보유량을 높이는 데 도움을 드릴 것입니다. 와서 살펴보세요!

일반적인 Vue 면접 질문 요약

MVVM 모델?

MVVM은 Model-View-ViewModel의 약어로, 본질적으로 MVC 모델의 업그레이드 버전입니다. 그 중 Model은 데이터 모델을 나타내고, View는 본 페이지를 나타내며, ViewModel은 View의 조합입니다. 및 Model을 사용하면 데이터가 ViewModel 레이어에 바인딩되고 보기가 변경되면 자동으로 데이터가 페이지에 렌더링됩니다. 데이터를 업데이트하라는 알림을 받게 됩니다. 이전에는 DOM을 조작하여 뷰를 업데이트했지만 이제는 데이터 기반 뷰입니다. Model-View-ViewModel的简写，其本质是MVC模型的升级版。其中 Model 代表数据模型，View 代表看到的页面，ViewModel是View和Model之间的桥梁，数据会绑定到ViewModel层并自动将数据渲染到页面中，视图变化的时候会通知ViewModel层更新数据。以前是通过操作DOM来更新视图，现在是数据驱动视图。

Vue的生命周期

每个 Vue 组件实例在创建后都会经过一系列的初始化过程，这个过程中会运行叫做生命周期钩子的函数，以便于用户在特定的阶段有机会添加自己的代码。

Vue 的生命周期可以分为8个阶段：创建前后、挂载前后、更新前后、销毁前后，以及一些特殊场景的生命周期。Vue 3 中还新增了是3个用于调试和服务端渲染的场景。【相关推荐：vuejs视频教程、web前端开发】

Vue의 라이프 사이클각 Vue 컴포넌트 인스턴스는 생성 후 일련의 초기화 프로세스를 거치게 됩니다. 이 프로세스 동안 라이프 사이클 후크라는 기능이 실행되므로 사용자는 특정 단계에서 자신의 코드를 추가할 수 있는 기회가 있습니다.

Vue 2中的生命周期	Vue 3中的生命周期	描述
beforeCreate	beforeCreate	创建前，此时data和 methods的数据都还没有初始化
created	created	创建后，data中有值，尚未挂载，可以进行一些Ajax请求
beforeMount	beforeMount	挂载前，会找到虚拟DOM，编译成Render
mounted	mounted	挂载后，DOM已创建，可用于获取访问数据和DOM元素
beforeUpdate	beforeUpdate	更新前，可用于获取更新前各种状态
updated	updated	更新后，所有状态已是最新
beforeDestroy	beforeUnmount	销毁前，可用于一些定时器或订阅的取消
destroyed	unmounted	销毁后，可用于一些定时器或订阅的取消
activated	activated	keep-alive缓存的组件激活时
deactivated	deactivated	keep-alive缓存的组件停用时
errorCaptured	errorCaptured	捕获一个来自子孙组件的错误时调用
—	renderTracked	调试钩子，响应式依赖被收集时调用
—	renderTriggered	调试钩子，响应式依赖被触发时调用
—	serverPrefetch

Vue의 수명 주기는 생성 전과 후, 마운트 전과 후, 업데이트 전과 후, 파괴 전과 후, 일부 특수 시나리오의 수명 주기 등 8단계로 나눌 수 있습니다. Vue 3에는 디버깅 및 서버 측 렌더링을 위한 세 가지 새로운 장면도 추가되었습니다. [관련 권장사항: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발]🎜🎜🎜beforeCreate 🎜🎜beforeCreate🎜🎜생성 전 data와 methods의 데이터가 아직 초기화되지 않았습니다🎜🎜🎜 created🎜🎜created🎜🎜생성 후 data에 값이 있지만 아직 마운트되지 않았습니다. code>Ajax 🎜🎜🎜beforeMount🎜🎜beforeMount🎜🎜를 요청하기 전에 가상 DOM을 찾아 컴파일합니다. Render🎜🎜🎜mounted🎜🎜mounted🎜🎜mount 후 DOM이 생성되고 액세스 데이터를 얻는 데 사용할 수 있으며 DOM 요소 🎜🎜🎜beforeUpdate🎜🎜beforeUpdate🎜🎜before update를 사용하여 다음을 수행할 수 있습니다. 업데이트 전 다양한 상태 획득🎜🎜🎜updated🎜🎜updated🎜🎜업데이트 후 모든 상태는 최신🎜🎜🎜beforeDestroy🎜🎜<code>beforeUnmount 🎜🎜파기 전에 일부 타이머나 구독을 취소하는 데 사용할 수 있습니다🎜🎜🎜destroyed🎜🎜unmounted 🎜🎜파기 후 일부 타이머 취소 또는 구독 취소에 사용될 수 있습니다. 🎜🎜🎜활성화🎜🎜활성화🎜🎜유지 -alive 캐시된 구성 요소가 활성화된 경우🎜🎜🎜비활성화🎜🎜비활성화🎜🎜keep-alive캐시된 구성 요소가 활성화된 경우 구성 요소가 비활성화되었습니다🎜🎜🎜errorCaptured🎜🎜<code>errorCaptured🎜🎜하위 구성 요소에서 오류를 캡처할 때 호출됩니다🎜🎜🎜—🎜🎜 renderTracked🎜🎜디버그 후크, 반응 종속성은 수집 시 호출됩니다. 🎜🎜🎜—🎜🎜renderTriggered🎜🎜디버깅 후크, 반응 종속성이 트리거될 때 호출됩니다🎜🎜🎜 —🎜🎜serverPrefetch🎜 🎜구성 요소 인스턴스는 서버에서 렌더링되기 전에 호출됩니다🎜🎜🎜🎜

상위-하위 구성 요소의 수명 주기:

• 렌더링 단계 로드 중: 상위 beforeCreate -> 상위 생성 -> 하위 beforeCreate -> ; 하위 beforeMount -> 상위 탑재加载渲染阶段：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
• 更新阶段：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
• 销毁阶段：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

Vue.$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

nextTick 是 Vue 提供的一个全局 API，由于 Vue 的异步更新策略，导致我们对数据修改后不会直接体现在 DOM 上，此时如果想要立即获取更新后的 DOM 状态，就需要借助该方法。

Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue 将开启一个异步更新队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入队列一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的 DOM 操作完成后才调用。

使用场景：

• 如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

• 在created生命周期中进行DOM操作

Vue 实例挂载过程中发生了什么？

挂载过程指的是 app.mount()过程，这是一个初始化过程，整体上做了两件事情：初始化和建立更新机制。

初始化会创建组件实例、初始化组件状态、创建各种响应式数据。

建立更新机制这一步会立即执行一次组件的更新函数，这会首次执行组件渲染函数并执行patch将vnode 转换为 dom； 同时首次执行渲染函数会创建它内部响应式数据和组件更新函数之间的依赖关系，这使得以后数据发生变化时会执行对应的更新函数。

Vue 的模版编译原理

Vue 中有个独特的编译器模块，称为compiler，它的主要作用是将用户编写的template编译为js中可执行的render函数。
在Vue 中，编译器会先对template进行解析，这一步称为parse，结束之后得到一个JS对象，称之为抽象语法树AST；然后是对AST进行深加工的转换过程，这一步称为transform，最后将前面得到的AST生成JS代码，也就是render函数。

Vue 的响应式原理

• Vue 2 中的数据响应式会根据数据类型做不同的处理。如果是对象，则通过Object.defineProperty(obj,key,descriptor)拦截对象属性访问，当数据被访问或改变时，感知并作出反应；如果是数组，则通过覆盖数组原型的方法，扩展它的7个变更方法（push、pop、shift、unshift、splice、sort、reverse），使这些方法可以额外的做更新通知，从而做出响应。
  缺点：

  • 初始化时的递归遍历会造成性能损失；
  • 通知更新过程需要维护大量 dep 实例和 watcher 实例，额外占用内存较多；
  • 新增或删除对象属性无法拦截，需要通过 Vue.set 及 delete 这样的 API 才能生效；
  • 对于ES6中新产生的Map、Set这些数据结构不支持。

• Vue 3 中利用ES6的Proxy

  업데이트 단계: 상위 beforeUpdate -> 하위 업데이트됨

삭제 단계: 상위 beforeDestroy -> 하위 파괴 -> 상위 파괴<h3 data-id="heading-8"> <strong><h3 data-id="heading-4"></h3></strong>Vue.$nextTick</h3> <ul style="list-style-type: disc;"> <li> <p>다음 DOM 업데이트 후 실행 주기가 종료됩니다. 지연 콜백. 업데이트된 DOM을 얻으려면 데이터를 수정한 후 즉시 이 방법을 사용하세요. <br></p>🎜<code>nextTick은 Vue에서 제공하는 글로벌 API입니다. Vue의 비동기 업데이트 전략으로 인해 현재 업데이트된 데이터를 얻으려는 경우 데이터 수정 사항이 DOM에 직접 반영되지 않습니다. 즉시 DOM 상태를 유지하려면 이 방법을 사용해야 합니다. 🎜🎜Vue는 DOM을 업데이트할 때 비동기적으로 실행됩니다. 데이터가 변경되면 Vue는 비동기 업데이트 큐를 열고 동일한 이벤트 루프에서 발생하는 모든 데이터 변경 사항을 버퍼링합니다. 동일한 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. 버퍼링 중 이러한 중복 제거는 불필요한 계산 및 DOM 작업을 방지하는 데 중요합니다. nextTick 메서드는 콜백 함수를 대기열에 추가하여 이전 DOM 작업이 완료된 후에만 함수가 호출되도록 합니다. 🎜🎜사용 시나리오: 🎜🎜🎜🎜데이터 수정 후 즉시 업데이트된 DOM 구조를 얻으려면 Vue.nextTick()🎜🎜🎜🎜을 사용할 수 있습니다. 생성된 라이프 사이클🎜🎜🎜

🎜Vue 인스턴스 마운팅 중 DOM 작업 중에 무슨 일이 발생하나요? 🎜🎜🎜마운팅 프로세스는 app.mount() 프로세스를 의미합니다. 이는 전체적으로 초기화 및 설정 두 가지 작업을 수행합니다. 업데이트 메커니즘. 🎜🎜초기화는 구성 요소 인스턴스를 생성하고 구성 요소 상태를 초기화하며 다양한 반응형 데이터를 생성합니다. 🎜🎜업데이트 메커니즘을 설정하면 구성 요소의 업데이트 기능이 즉시 실행됩니다. 이렇게 하면 처음으로 구성 요소 렌더링 기능이 실행되고 patch를 실행하여 vnode를 로 변환합니다. >dom code>; 동시에 렌더링 기능을 처음 실행하면 내부 응답 데이터와 구성 요소 업데이트 기능 사이에 종속성이 생성되므로 데이터가 변경될 때 해당 업데이트 기능이 실행됩니다. 미래. 🎜<h3 data-id="heading-6">🎜Vue의 템플릿 컴파일 원리🎜🎜🎜Vue에는 <code>컴파일러라는 고유한 컴파일러 모듈이 있습니다. 주요 기능은 사용자가 작성한 템플릿을 컴파일하는 것입니다. 는 js에서 실행 가능한 render 함수로 컴파일됩니다. 🎜Vue에서 컴파일러는 먼저 템플릿을 구문 분석합니다. 이 단계를 구문 분석이라고 합니다. 완료 후 추상 구문 트리라고 하는 JS 객체가 얻어집니다. .AST; AST의 심층 처리 변환 프로세스가 있으며, 이 단계를 변환이라고 합니다. 앞서 얻은 JS 코드, 즉 render 함수가 생성됩니다. 🎜

🎜Vue의 응답성 원칙🎜🎜🎜🎜🎜Vue 2의 데이터 응답성은 데이터 유형에 따라 다르게 처리됩니다. 객체인 경우 Object.defineProperty(obj,key,descriptor)를 통해 객체 속성 액세스를 차단합니다. 데이터에 액세스하거나 변경되면 배열인 경우 감지하고 반응합니다. 프로토타입 메서드는 7가지 변경 메서드(push, pop, Shift, unshift, splice, sort, reverse)를 확장하여 이러한 메서드가 추가로 업데이트 알림을 수행하고 응답할 수 있도록 합니다. 🎜단점: 🎜🎜🎜초기화 중 재귀 순회는 성능 손실을 초래합니다. 🎜🎜알림 업데이트 프로세스에서는 많은 수의 dep 인스턴스와 watcher 인스턴스를 유지해야 합니다. 많은 추가 메모리 🎜🎜추가되거나 삭제된 개체 속성은 가로챌 수 없으며 Vue.set 및 delete와 같은 API를 통해 적용되어야 합니다. ES6 새로 생성된 Map 및 Set 데이터 구조는 지원되지 않습니다. 🎜🎜🎜🎜🎜Vue 3는 ES6의 Proxy 메커니즘을 사용하여 응답해야 하는 데이터를 프록시합니다. 객체와 배열을 동시에 지원할 수 있습니다. 동적 속성 추가 및 삭제가 모두 지원됩니다. 객체 중첩 속성은 런타임에 재귀적이며 특별히 큰 용량을 유지할 필요가 없습니다. 종속성 수가 증가했으며 성능이 크게 향상되었습니다. 🎜🎜🎜🎜🎜Virtual DOM🎜🎜🎜🎜🎜개념: 🎜Virtual DOM은 이름에서 알 수 있듯이 가상 DOM 객체이지만, 다양한 속성을 통해 뷰 구조를 설명합니다. 🎜

가상 DOM의 장점:
(1) 성능 개선
DOM을 직접 조작하는 데에는 한계가 있습니다. 실제 요소에는 많은 속성이 있으므로 직접 조작하면 많은 추가 속성 콘텐츠가 동시에 작동됩니다. 이것은 필요하지 않습니다. 이러한 작업을 JS 객체로 전송하면 훨씬 간단해집니다. 또한 DOM 작업은 상대적으로 비용이 많이 들고 DOM 작업을 자주 수행하면 페이지 다시 그리기 및 리플로우가 쉽게 발생할 수 있습니다. 추상 VNode를 통해 중간 처리를 수행하면 직접적인 DOM 작업 횟수를 효과적으로 줄일 수 있으므로 페이지 다시 그리기 및 리플로우가 줄어듭니다.
(2) 크로스 플랫폼 구현에 편리함
동일한 VNode 노드를 다른 플랫폼의 해당 콘텐츠로 렌더링할 수 있습니다. 예를 들어 브라우저에서 렌더링하면 DOM 요소 노드이고 네이티브(iOS, Android)로 렌더링하면 됩니다. ) 해당 컨트롤이 됩니다. Vue 3를 사용하면 개발자는 VNode 기반의 사용자 정의 렌더러를 구현하여 다양한 플랫폼에 대한 렌더링을 용이하게 할 수 있습니다.

구조:
일반적으로 태그, props 및 children을 포함하는 통일된 표준이 없습니다. tag、props、children三项。
tag：必选。就是标签，也可以是组件，或者函数。
props：非必选。就是这个标签上的属性和方法。
children：非必选。就是这个标签的内容或者子节点。如果是文本节点就是字符串；如果有子节点就是数组。换句话说，如果判断children是字符串的话，就表示一定是文本节点，这个节点肯定没有子元素。

diff 算法

1、概念：

diff算法是一种对比算法，通过对比旧的虚拟DOM和新的虚拟DOM，得出是哪个虚拟节点发生了改变，找出这个虚拟节点并只更新这个虚拟节点所对应的真实节点，而不用更新其他未发生改变的节点，实现精准地更新真实DOM，进而提高效率。

2、对比方式：

diff算法的整体策略是：深度优先，同层比较。比较只会在同层级进行, 不会跨层级比较；比较的过程中，循环从两边向中间收拢。

• 首先判断两个节点的tag是否相同，不同则删除该节点重新创建节点进行替换。
• tag相同时，先替换属性，然后对比子元素，分为以下几种情况：
  • 新旧节点都有子元素时，采用双指针方式进行对比。新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode节点再分情况操作。
  • 新节点有子元素，旧节点没有子元素，则将子元素虚拟节点转化成真实节点插入即可。
  • 新节点没有子元素，旧节点有子元素，则清空子元素，并设置为新节点的文本内容。
  • 新旧节点都没有子元素时，即都为文本节点，则直接对比文本内容，不同则更新。

Vue中key的作用？

key的作用主要是为了更加高效的更新虚拟 DOM。

Vue 判断两个节点是否相同时，主要是判断两者的key和元素类型tag。因此，如果不设置key，它的值就是 undefined，则可能永远认为这是两个相同的节点，只能去做更新操作，将造成大量的 DOM 更新操作。

为什么组件中的 data 是一个函数？

在 new Vue() 中，可以是函数也可以是对象，因为根实例只有一个，不会产生数据污染。

在组件中，data 必须为函数，目的是为了防止多个组件实例对象之间共用一个 data，产生数据污染；而采用函数的形式，initData 时会将其作为工厂函数都会返回全新的 data 对象。

Vue 中组件间的通信方式？

• 父子组件通信：

  父向子传递数据是通过props，子向父是通过$emit触发事件；通过父链/子链也可以通信（$parent/$children）；ref也可以访问组件实例；provide/inject；$attrs/$listeners。

• 兄弟组件通信：

  全局事件总线EventBus、Vuex。

• 跨层级组件通信：

  全局事件总线EventBus、Vuex、provide/inject태그: 필수입니다. 그것은 라벨일 수도 있고, 구성 요소일 수도 있고, 기능일 수도 있습니다.

  props: 선택사항. 이 레이블의 속성과 메서드입니다. 🎜어린이: 선택사항. 이 태그의 콘텐츠 또는 하위 노드입니다. 텍스트 노드인 경우 문자열이고, 하위 노드가 있는 경우 배열입니다. 즉, children이 문자열로 결정되면 이는 텍스트 노드여야 하며 이 노드에는 하위 요소가 없어야 함을 의미합니다. 🎜🎜🎜

diff 알고리즘

🎜1. 개념: 🎜🎜diff 알고리즘은 비교 알고리즘은 이전 가상 DOM과 새 가상 DOM을 비교하여 어떤 가상 노드가 변경되었는지 확인하고, 이 가상 노드를 찾아 변경되지 않은 다른 노드를 업데이트하지 않고 이 가상 노드에 해당하는 실제 노드만 업데이트할 수 있습니다. 실제 DOM을 정확하게 업데이트하여 효율성을 향상시킵니다. 🎜🎜🎜2. 비교 방법: 🎜🎜diff 알고리즘의 전체 전략은 깊이 우선, 동일 수준 비교입니다. 비교는 동일한 수준에서만 수행되며, 비교 프로세스 중에는 여러 수준에서 비교되지 않습니다. 루프는 양쪽에서 중간으로 축소됩니다. 🎜

🎜먼저 두 노드의 태그가 동일한지 확인하고, 다르다면 해당 노드를 삭제하고 교체용 노드를 다시 생성하세요. 🎜🎜태그가 동일한 경우 속성을 먼저 교체한 후 하위 요소를 비교합니다. 이는 다음과 같은 상황으로 구분됩니다.
🎜기존 노드와 새 노드에 하위 요소가 있는 경우 , 비교를 위해 이중 포인터가 사용됩니다. 이전 및 새 헤드 및 테일 포인터를 비교하고, 중간에 더 가까운 루프를 반복하고, 상황에 따라 patchVnode를 호출하여 patch 프로세스를 반복하고, createElem을 호출합니다. code>에서 새로운 노드를 생성하는데, 해시 테이블은 동일한 <code>key를 가진 VNode 노드를 찾아 상황에 따라 동작합니다. 🎜🎜새 노드에 하위 요소가 있고 이전 노드에 하위 요소가 없는 경우 하위 요소의 가상 노드를 실제 노드로 변환하여 삽입하면 됩니다. 🎜🎜새 노드에 하위 요소가 없고 이전 노드에 하위 요소가 있는 경우 하위 요소가 지워지고 새 노드의 텍스트 콘텐츠로 설정됩니다. 🎜🎜이전 노드와 새 노드 모두 하위 요소가 없는 경우, 즉 둘 다 텍스트 노드인 경우 텍스트 내용을 직접 비교하여 다르면 업데이트됩니다. 🎜
🎜

Vue에서 키의 역할은 무엇인가요?

🎜 키의 주요 기능은 가상 DOM을 보다 효율적으로 업데이트하는 것입니다. 🎜🎜Vue는 두 노드가 동일한지 확인할 때 주로 키와 요소 유형 태그를 결정합니다. 따라서 key가 설정되지 않고 그 값이 정의되지 않은 경우 항상 두 개의 동일한 노드이고 업데이트만 가능하다고 간주될 수 있으며 이로 인해 많은 수의 DOM 업데이트 작업이 발생하게 됩니다. 🎜

구성요소의 데이터가 함수인 이유는 무엇인가요?

🎜new Vue()에서는 루트 인스턴스가 하나만 있고 데이터 오염이 발생하지 않기 때문에 함수 또는 객체가 될 수 있습니다. 🎜🎜컴포넌트에서 데이터는 함수여야 합니다. 여러 컴포넌트 인스턴스 객체가 동일한 데이터를 공유하여 데이터 오염을 일으키는 것을 방지하는 것이 목적입니다. 함수 형태에서는 initData를 사용할 때 팩토리 함수로 사용됩니다. 그리고 새로운 데이터 객체가 반환됩니다. 🎜

Vue의 구성요소 간에 어떻게 통신하나요?

🎜🎜상위 구성 요소와 하위 구성 요소 간의 통신: 🎜🎜부모는 props를 통해 하위 구성 요소에 데이터를 전달합니다. , 하위는 상위로 데이터를 전송합니다. 이벤트는 $emit를 통해 트리거되며 상위 체인/하위 체인($parent/$)을 통해 통신할 수도 있습니다. children); refprovide/inject/에 액세스할 수도 있습니다. $리스너. 🎜🎜🎜🎜자매 구성 요소 통신: 🎜🎜전역 이벤트 버스 EventBus, Vuex. 🎜🎜🎜🎜교차 수준 구성 요소 통신: 🎜🎜전역 이벤트 버스 EventBus, Vuex, provide/inject . 🎜

브이쇼와 브이프의 차이점은 무엇인가요?

• 다양한 제어 방법. v-show는 CSS 속성 display: none을 요소에 추가하지만 요소는 여전히 존재하며 v-if는 표시 또는 숨기기를 제어합니다. 요소 전체를 추가하거나 제거합니다. v-show是通过给元素添加 css 属性display: none，但元素仍然存在；而v-if控制元素显示或隐藏是将元素整个添加或删除。

• 编译过程不同。v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件；v-show只是简单的基于 css 切换。

• 编译条件不同。v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，渲染条件为假时，并不做操作，直到为真才渲染。

• 触发生命周期不同。v-show由 false 变为 true 的时候不会触发组件的生命周期；v-if由 false 变为 true 的时候，触发组件的beforeCreate、created、beforeMount、mounted钩子，由 true 变为 false 的时候触发组件的beforeDestory、destoryed钩子。

• 性能消耗不同。v-if有更高的切换消耗；v-show有更高的初始渲染消耗。

使用场景：
如果需要非常频繁地切换，则使用v-showv-if较好，如：用户登录之后，根据权限不同来显示不同的内容。

computed 和 watch 的区别？

• computed计算属性，依赖其它属性计算值，内部任一依赖项的变化都会重新执行该函数，计算属性有缓存，多次重复使用计算属性时会从缓存中获取返回值，计算属性必须要有return关键词。
• watch侦听到某一数据的变化从而触发函数。当数据为对象类型时，对象中的属性值变化时需要使用深度侦听deep属性，也可在页面第一次加载时使用立即侦听immdiate属性。

运用场景：
计算属性一般用在模板渲染中，某个值是依赖其它响应对象甚至是计算属性而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。

v-if 和 v-for 为什么不建议放在一起使用？

Vue 2 中，v-for的优先级比v-if高，这意味着v-if将分别重复运行于每一个v-for循环中。如果要遍历的数组很大，而真正要展示的数据很少时，将造成很大的性能浪费。

Vue 3 中，则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，会导致异常。

通常有两种情况导致要这样做：

• 为了过滤列表中的项目，比如：v-for = "user in users" v-if = "user.active"。这种情况，可以定义一个计算属性，让其返回过滤后的列表即可。
• 为了避免渲染本该被隐藏的列表，比如v-for = "user in users"  v-if = "showUsersFlag"。这种情况，可以将v-if移至容器元素上或在外面包一层template即可。

$set

可手动添加响应式数据，解决数据变化视图未更新问题。当在项目中直接设置数组的某一项的值，或者直接设置对象的某个属性值，会发现页面并没有更新。这是因为Object.defineProperty()的限制，监听不到数据变化，可通过this.$set(数组或对象，数组下标或对象的属性名，更新后的值)

🎜컴파일 과정이 다릅니다. v-if 전환에는 부분 컴파일/제거 프로세스가 있습니다. 전환 프로세스 중에 내부 이벤트 리스너와 하위 구성 요소가 적절하게 삭제되고 다시 빌드됩니다. CSS 스위치에서. 🎜🎜🎜🎜편집 조건이 다릅니다. v-if는 true 조건부 렌더링입니다. 이는 조건부 블록 내의 이벤트 리스너와 하위 구성 요소가 전환 프로세스 중에 적절하게 삭제되고 다시 작성되도록 합니다. true가 될 때까지 렌더링하지 않습니다. 🎜🎜🎜🎜트리거 수명 주기가 다릅니다. v-show가 false에서 true로 변경되면 구성 요소의 수명 주기가 트리거되지 않습니다. v-if가 false에서 true로 변경되면 구성 요소의 beforeCreate가 실행됩니다. , created, beforeMount, mounted 후크는 변경 시 구성 요소의 beforeDestory를 트리거합니다. true에서 false로 >, 파괴 후크. 🎜🎜🎜🎜성능 소모가 다릅니다. v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높습니다. 🎜🎜🎜🎜사용 시나리오:
매우 자주 전환해야 하는 경우 아코디언 메뉴, 탭 페이지 등과 같은 v-show를 사용하는 것이 좋습니다. 런타임 중에 조건이 거의 변경되지 않으면 v-if를 사용하는 것이 좋습니다. 예를 들어 사용자가 로그인한 후 권한에 따라 다른 콘텐츠가 표시됩니다. 🎜

🎜계산과 시계의 차이점은 무엇인가요? 🎜🎜

🎜계산계산된 속성은 다른 속성을 사용하여 값을 계산합니다. 내부 종속성이 변경되면 계산된 속성이 여러 번 재사용될 때 함수가 다시 실행됩니다. 캐시에서 반환 값을 얻으려면 계산된 속성에 return 키워드가 있어야 합니다. 🎜🎜watch는 특정 데이터의 변화를 듣고 기능을 트리거합니다. 데이터가 객체 유형인 경우 객체의 속성 값이 변경될 때 딥 리스닝 deep 속성을 ​​사용해야 하며, 페이지가 변경될 때 즉시 리스닝 immdiate을 사용할 수도 있습니다. 첫 번째로 로드된 속성입니다. 🎜🎜🎜애플리케이션 시나리오:
계산된 속성은 일반적으로 템플릿 렌더링에 사용됩니다. 특정 값은 다른 응답 개체 또는 계산된 속성에 따라 달라지지만 청취 속성은 복잡한 비즈니스 논리를 완성하기 위해 특정 값의 변화를 관찰하는 데 적합합니다. . 🎜

🎜v-if와 v-for를 함께 사용하지 않는 것이 왜 권장되나요? 🎜🎜🎜Vue 2에서는 v-for가 v-if보다 우선순위가 높습니다. 즉, v-if가 반복적으로 실행됩니다. . 모든 v-for 루프에서. 순회할 배열이 크고 표시할 실제 데이터가 매우 작다면 엄청난 성능 낭비가 발생합니다. 🎜🎜Vue 3에서는 정반대입니다. v-if는 v-for보다 우선순위가 높으므로 v-if 이 실행되면 호출하는 변수가 아직 존재하지 않아 예외가 발생합니다. 🎜🎜이 작업을 수행하게 되는 일반적으로 두 가지 상황이 있습니다: 🎜

🎜목록의 항목을 필터링하려면 다음과 같습니다. v-for = "user in users" v-if = "user.active". 이 경우 계산된 속성을 정의하고 필터링된 목록을 반환하도록 할 수 있습니다. 🎜🎜v-for = "user in users" v-if = "showUsersFlag"와 같이 숨겨야 하는 목록을 렌더링하지 않으려면. 이 경우 v-if를 컨테이너 요소로 이동하거나 템플릿 레이어로 래핑할 수 있습니다. 🎜🎜

🎜$set🎜🎜🎜반응형 데이터를 수동으로 추가하여 데이터 변경 보기가 업데이트되지 않는 문제를 해결할 수 있습니다. 배열의 항목 값을 직접 설정하거나 프로젝트의 개체 속성 값을 직접 설정하면 페이지가 업데이트되지 않는 것을 확인할 수 있습니다. 이는 데이터 변경 사항을 모니터링할 수 없는 Object.defineProperty()의 제한 사항 때문입니다. this.$set(array 또는 object, array subscript 또는 object 속성 이름, 업데이트된 값을 사용할 수 있습니다. )해결되었습니다. 🎜

연결 유지란 무엇인가요?

• 기능: 구성 요소 캐싱을 구현하고 구성 요소의 상태를 유지하며 반복 렌더링으로 인한 성능 문제를 방지합니다.
• 작동 원리: Vue.js는 내부적으로 DOM 노드를 개별 VNode 노드로 추상화합니다. keep-alive 구성 요소의 캐시도 VNode 노드를 기반으로 합니다. 조건에 맞는 구성 요소를 캐시 개체에 캐시한 후, 다시 렌더링할 때 캐시 개체에서 VNode 노드를 꺼내 렌더링합니다. keep-alive组件的缓存也是基于 VNode 节点的。它将满足条件的组件在 cache 对象中缓存起来，重新渲染的时候再将 VNode 节点从 cache 对象中取出并渲染。
• 可以设置以下属性：
  ① include：字符串或正则，只有名称匹配的组件会被缓存。
  ② exclude：字符串或正则，任何名称匹配的组件都不会被缓存。
  ③ max：数字，最多可以缓存多少组件实例。
  匹配首先检查组件的name选项，如果name选项不可用，则匹配它的局部注册名称（父组件 components选项的键值），匿名组件不能被匹配。

设置了keep-alive缓存的组件，会多出两个生命周期钩子：activated、deactivated。
首次进入组件时：beforeCreate --> created --> beforeMount --> mounted --> activated --> beforeUpdate --> updated --> deactivated
再次进入组件时：activated --> beforeUpdate --> updated --> deactivated

mixin

mixin（混入）， 它提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

使用场景： 不同组件中经常会用到一些相同或相似的代码，这些代码的功能相对独立。可以通过mixin 将相同或相似的代码提出来。

劣势：

• 变量来源不明确

• 多 mixin 可能会造成命名冲突（解决方式：Vue 3的组合API）

• mixin 和组件坑出现多对的的关系，使项目复杂度变高。

插槽

slot插槽，一般在组件内部使用，封装组件时，在组件内部不确定该位置是以何种形式的元素展示时，可以通过slot占据这个位置，该位置的元素需要父组件以内容形式传递过来。slot分为：

• 默认插槽：子组件用<slot>标签来确定渲染的位置，标签里面可以放DOM结构作为后备内容，当父组件在使用的时候，可以直接在子组件的标签内写入内容，该部分内容将插入子组件的<slot>标签位置。如果父组件使用的时候没有往插槽传入内容，后备内容就会显示在页面。
• 具名插槽：子组件用name属性来表示插槽的名字，没有指定name的插槽，会有隐含的名称叫做 default。父组件中在使用时在默认插槽的基础上通过v-slot指令指定元素需要放在哪个插槽中，v-slot值为子组件插槽name属性值。使用v-slot指令指定元素放在哪个插槽中，必须配合<template>元素，且一个<template>元素只能对应一个预留的插槽，即不能多个<template> 元素都使用v-slot指令指定相同的插槽。v-slot的简写是#，例如v-slot:header可以简写为#header。
• 作用域插槽：子组件在<slot>标签上绑定props数据，以将子组件数据传给父组件使用。父组件获取插槽绑定 props 数据的方法：
  

  • scope="接收的变量名"：<template scope="接收的变量名">

  • slot-scope="接收的变量名"：<template slot-scope="接收的变量名">

  • v-slot:插槽名="接收的变量名"：<template v-slot:插槽名="接收的变量名">

    다음 속성을 설정할 수 있습니다.
    ① include: 문자열 또는 정규식, 이름이 일치하는 구성 요소만 캐시됩니다.
    ② 제외: 문자열 또는 정규식, 이름이 일치하는 구성 요소는 캐시되지 않습니다.
    3 max: 숫자, 캐시할 수 있는 최대 구성 요소 인스턴스 수입니다.
    일치에서는 먼저 구성요소의 name 옵션을 확인합니다. name 옵션을 사용할 수 없는 경우 로컬 등록 이름(상위 항목의 키 값)과 일치합니다. 구성 요소의 구성 요소 옵션), 익명 구성 요소는 일치할 수 없습니다.
keep-alive 캐시가 설정된 구성 요소에는 활성화, 비활성화라는 두 개의 수명 주기 후크가 더 있습니다.
처음으로 구성 요소를 입력할 때: beforeCreate --> beforeMount --> 활성화됨 --> 업데이트됨 다시 구성 요소에 들어가면: activate --> beforeUpdate --> deactivated

mixin

mixin (혼합) Vue 구성 요소에 재사용 가능한 기능을 배포하는 매우 유연한 방법을 제공합니다.

사용 시나리오: 동일하거나 유사한 코드가 서로 다른 구성 요소에 사용되는 경우가 많으며 이러한 코드의 기능은 상대적으로 독립적입니다. 믹스인을 통해 동일하거나 유사한 코드를 추출할 수 있습니다. 🎜🎜단점: 🎜

🎜🎜변수 소스가 불분명합니다🎜🎜🎜🎜여러 믹스인으로 인해 이름 충돌이 발생할 수 있습니다(해결책: Vue 3의 조합 API)🎜🎜🎜 🎜 믹스인과 컴포넌트 피트 사이에는 여러 쌍의 관계가 있어 프로젝트가 더욱 복잡해집니다. 🎜🎜🎜

🎜Slot🎜🎜🎜slot 슬롯은 일반적으로 컴포넌트 내부에서 사용되며, 컴포넌트를 캡슐화할 때 위치가 확실하지 않습니다. 어떤 형태로든 요소를 ​​표시할 때 슬롯을 통해 이 위치를 차지할 수 있습니다. 이 위치의 요소는 상위 구성 요소의 콘텐츠 형식으로 전달되어야 합니다. 슬롯은 다음과 같이 나뉩니다: 🎜🎜🎜기본 슬롯: 하위 구성 요소는 <slot> 태그를 사용하여 렌더링 위치를 결정하며 DOM 구조는 백업 콘텐츠로 사용됩니다. 상위 구성 요소를 사용하는 경우 하위 구성 요소의 태그에 콘텐츠를 직접 작성할 수 있습니다. 코드> 하위 구성요소의 코드> 라벨 위치입니다. 상위 구성 요소가 사용될 때 콘텐츠를 슬롯에 전달하지 않으면 백업 콘텐츠가 페이지에 표시됩니다. 🎜🎜이름이 지정된 슬롯: 하위 구성 요소는 name 속성을 ​​사용하여 슬롯 이름을 나타냅니다. name을 지정하지 않은 슬롯에는 암시적인 이름이 있습니다. 기본값이라고 합니다. 상위 구성 요소에서 사용되는 경우 v-slot 지시어는 v-slot 값을 기반으로 요소를 배치해야 하는 슬롯을 지정하는 데 사용됩니다. 하위 구성요소에 의해 삽입된 슬롯입니다. 슬롯 name 속성 값입니다. v-slot 지시문을 사용하여 요소가 배치될 슬롯을 지정합니다. 이는 <template> 요소 및 <template> 요소 하나의 예약된 슬롯에만 해당할 수 있습니다. 즉, 여러 <template> 요소는 v-slot 지시문을 사용하여 동일한 슬롯을 지정할 수 없습니다. v-slot의 약어는 #입니다. 예를 들어 v-slot:header는 #header로 약칭할 수 있습니다. >. 🎜🎜Scope Slot: 하위 구성 요소는 <slot> 태그의 props 데이터를 바인딩하여 하위 구성 요소 데이터를 상위 구성 요소 사용에 전달합니다. . 슬롯 바인딩 소품 데이터를 얻기 위한 상위 구성 요소의 방법:


🎜🎜scope="received 변수 이름":<template range= "Received 변수 이름">🎜🎜🎜🎜 Slot-scope="수신된 변수 이름": <template Slot-scope="수신된 변수 이름">🎜 🎜🎜🎜v- 슬롯: 슬롯 이름="수신 변수 이름": <template v-slot: 슬롯 이름="수신 변수 이름">🎜🎜🎜🎜🎜🎜 🎜Vue의 수정자는 무엇인가요? 🎜🎜🎜Vue에서 수정자는 DOM 이벤트의 많은 세부 사항을 처리하므로 더 이상 이러한 귀찮은 일을 처리하는 데 많은 시간을 소비할 필요가 없으며 프로그램의 논리적 처리에 더 많은 에너지를 집중할 수 있습니다. Vue의 수정자는 다음 유형으로 나뉩니다: 🎜

• 양식 수정자
lazy 정보를 입력한 후 커서가 레이블을 벗어날 때만 값에 값이 할당됩니다. 즉, 변경 이벤트 . <code>lazy 填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步。
number 自动将用户输入值转化为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值。
trim 自动过滤用户输入的首尾空格，而中间的空格不会被过滤。

• 事件修饰符
  stop 阻止了事件冒泡，相当于调用了event.stopPropagation方法。
  prevent 阻止了事件的默认行为，相当于调用了event.preventDefault方法。
  self 只当在 event.target 是当前元素自身时触发处理函数。
  once 绑定了事件以后只能触发一次，第二次就不会触发。
  capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理。
  passive 告诉浏览器你不想阻止事件的默认行为。
  native 让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件。
  

• 鼠标按键修饰符
  left 左键点击。
  right 右键点击。
  middle 中键点击。
  

• 键值修饰符
  键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，有如下：keyCode存在很多，但vue为我们提供了别名，分为以下两种：

  • 普通键（enter、tab、delete、space、esc、up...）
  • 系统修饰键（ctrl、alt、meta、shift...）

对 SPA 的理解？

• 概念：
  SPA（Single-page  application），即单页面应用，它是一种网络应用程序或网站的模型，通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换时打断用户体验。在SPA中，所有必要的代码（HTML、JavaScript 和 CSS）都通过单个页面的加载而检索，或者根据需要（通常是响应用户操作）动态装载适当的资源并添加到页面。页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。举个例子，就像一个杯子，上午装的是牛奶，中午装的是咖啡，下午装的是茶，变得始终是内容，杯子始终不变。

• SPA与MPA的区别：
  MPA（Muti-page application），即多页面应用。在MPAnumber는 사용자 입력 값을 숫자 유형으로 자동 변환하지만, parseFloat로 값을 구문 분석할 수 없는 경우 원래 값이 반환됩니다.

  trim은 사용자가 입력한 첫 번째 공백과 마지막 공백을 자동으로 필터링하지만 중간에 있는 공백은 필터링되지 않습니다.

Vue 2의 수명 주기	Vue 3의 수명 주기	설명

이벤트 수정자 self 핸들러 함수는 event.target이 현재 요소 자체인 경우에만 트리거됩니다. capture는 이벤트 캡처 모드를 사용합니다. 즉, 요소 ​​자체에 의해 트리거된 이벤트가 여기에서 먼저 처리된 다음 처리를 위해 내부 요소로 전달됩니다. native를 사용하면 구성 요소가 html 내장 태그와 같은 루트 요소의 기본 이벤트를 수신할 수 있습니다. 그렇지 않으면 v-on을 사용합니다. 구성 요소는 자체적으로 이벤트를 수신합니다. 마우스 버튼 수정자오른쪽 마우스 오른쪽 버튼을 클릭하세요. 키 값 수정자키보드 수정자는 다음과 같이 키보드 이벤트(onkeyup, onkeydown)를 수정하는 데 사용됩니다. >많은 것들이 있지만 vue는 다음 두 가지 유형으로 구분되는 별칭을 제공합니다: 공용 키(enter, tab, delete, space, esc, up... )개념: SPA(Single-page application), 즉 단일 페이지 애플리케이션으로, 네트워크 애플리케이션이나 웹사이트의 모델입니다. 동적으로 다시 작성됨 현재 페이지를 사용하여 사용자와 상호 작용합니다. 이 방법을 사용하면 페이지 간 전환 시 사용자 경험이 중단되는 것을 방지할 수 있습니다. SPA에서는 단일 페이지를 로드할 때 필요한 모든 코드(HTML, JavaScript 및 CSS)가 검색되거나 필요에 따라 적절한 리소스가 동적으로 로드되어 페이지에 추가됩니다(보통 사용자의 요청에 따라). 조치) . 페이지는 어떤 시점에도 다시 로드되지 않으며 제어권이 다른 페이지로 이전되지도 않습니다. 예를 들어, 컵과 마찬가지로 아침에는 우유, 점심에는 커피, 오후에는 차가 항상 들어 있고 컵은 변하지 않습니다. SPA와 MPA의 차이점: 여러 메인 페이지 히스토리 모드

stop는 이벤트 버블링을 방지합니다. 이는 event.stopPropagation 메서드를 호출하는 것과 같습니다. prevent는 이벤트의 기본 동작을 방지합니다. 이는 event.preventDefault 메서드를 호출하는 것과 동일합니다.	한 번 이벤트를 바인딩한 후에는 한 번만 트리거될 수 있으며 두 번째에는 트리거되지 않습니다.	passive는 이벤트의 기본 동작을 차단하고 싶지 않음을 브라우저에 알립니다.
왼쪽 왼쪽 클릭.	가운데 가운데를 클릭하세요.
	시스템 수정자 키(ctrl, alt, Meta, Shift...) SPA에 대한 이해?
	MPA(Muti-page application), 즉 다중 페이지 애플리케이션. MPA에서 각 페이지는 기본 페이지이며 페이지에 액세스할 때마다 필요에 따라 Html, CSS 및 JS 파일을 다시 로드해야 합니다. .
	SPA	MPA
		하나의 메인 페이지와 여러 페이지 조각
	url 모드로 구성	해시 모드

🎜🎜SEO 검색엔진 최적화🎜🎜구현이 어렵지, SSR 방식을 사용하면 개선 가능🎜🎜구현이 쉬움🎜🎜🎜🎜데이터 전송🎜🎜easy🎜🎜URL, 쿠키, 로컬 저장소 등을 통해 전송🎜🎜🎜🎜페이지 전환 🎜🎜빠름, 좋은 사용자 경험🎜🎜로딩 리소스 전환, 느린 속도, 열악한 사용자 경험🎜🎜🎜🎜유지 관리 비용🎜🎜비교적 쉬움🎜🎜비교적 복잡함🎜🎜🎜🎜

SPA 장점과 단점: SPA的优缺点：
优点：

• 具有桌面应用的即时性、网站的可移植性和可访问性
  
• 用户体验好、快，内容的改变不需要重新加载整个页面
  
• 良好的前后端分离，分工更明确
  

缺点：

• 不利于搜索引擎的抓取
  
• 首次渲染速度相对较慢
  

双向绑定？

• 概念：
  Vue 中双向绑定是一个指令v-model，可以绑定一个响应式数据到视图，同时视图的变化能改变该值。v-model是语法糖，默认情况下相当于:value和@input，使用v-model可以减少大量繁琐的事件处理代码，提高开发效率。

• 使用：
  通常在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。

• 原理：
  v-model是一个指令，双向绑定实际上是Vue 的编译器完成的，通过输出包含v-model模版的组件渲染函数，实际上还是value属性的绑定及input事件监听，事件回调函数中会做相应变量的更新操作。

子组件是否可以直接改变父组件的数据？

• 所有的prop都遵循着单项绑定原则，props因父组件的更新而变化，自然地将新状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。
  另外，每次父组件更新后，所有的子组件中的props都会被更新为最新值，这就意味着不应该子组件中去修改一个prop，若这么做了，Vue 会在控制台上抛出警告。

• 实际开发过程中通常有两个场景导致要修改prop：

  • prop被用于传入初始值，而子组件想在之后将其作为一个局部数据属性。这种情况下，最好是新定义一个局部数据属性，从props获取初始值即可。
  • 需要对传入的prop值做进一步转换。最好是基于该prop值定义一个计算属性。

• 实践中，如果确实要更改父组件属性，应emit一个事件让父组件变更。当对象或数组作为props被传入时，虽然子组件无法更改props绑定，但仍然可以更改对象或数组内部的值。这是因为JS的对象和数组是按引用传递，而对于 Vue 来说，禁止这样的改动虽然可能，但是有很大的性能损耗，比较得不偿失。

Vue Router中的常用路由模式和原理？

1、hash 模式：

• location.hash的值就是url中 # 后面的东西。它的特点在于：hash虽然出现url中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
• 可以为hash的改变添加监听事件window.addEventListener("hashchange", funcRef, false)，每一次改变hash (window.location.hash)，都会在浏览器的访问历史中增加一个记录，利用hash的以上特点，就可以实现前端路由更新视图但不重新请求页面的功能了。
  特点：兼容性好但是不美观
  

2、history 模式：

利用 HTML5 History Interface 中新增的pushState()和replaceState()方法。
这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go 장점:

데스크탑 애플리케이션의 즉각성, 웹사이트의 이식성 및 접근성을 갖추고 있습니다. 🎜🎜🎜좋은 사용자 경험, 빠른 콘텐츠 변화는 전체 페이지를 다시 로드할 필요가 없음🎜🎜🎜프런트엔드와 백엔드 분리가 우수하고 작업 구분이 더 명확함🎜🎜

🎜단점: 🎜🎜

🎜검색 엔진 크롤링에 도움이 되지 않음🎜🎜🎜첫 번째 렌더링 속도가 상대적으로 느립니다. 느립니다 🎜🎜

🎜

양방향 바인딩?

🎜🎜개념: 🎜Vue의 양방향 바인딩은 v-model 명령입니다. 바인딩 반응형 데이터가 뷰에 추가되고, 뷰를 변경하면 값이 변경될 수 있습니다. v-model은 구문 설탕으로, 기본적으로 :value 및 @input과 동일합니다. v-model을 사용하세요. 지루한 이벤트 처리 코드를 많이 줄이고 개발 효율성을 향상시킬 수 있습니다. 🎜🎜🎜🎜사용법: 🎜일반적으로 양식 항목에 v-model을 사용하고, 특정 값의 입력 및 출력 제어를 나타내기 위해 사용자 정의 구성 요소에도 사용할 수 있습니다. 🎜🎜🎜🎜원리: 🎜v-model은 실제로 Vue 컴파일러에서 v-model 템플릿이 포함된 구성 요소를 출력하여 수행되는 명령입니다. 렌더링 함수는 실제로 value 속성과 input 이벤트 리스너의 바인딩입니다. 이벤트 콜백 함수는 해당 변수를 업데이트합니다. 🎜🎜

하위 구성요소가 상위 구성요소의 데이터를 직접 변경할 수 있나요?

🎜🎜모든 prop는 단일 바인딩 원칙인 props변경 기한을 따릅니다. 상위 구성 요소를 업데이트하면 새 상태가 뒤로 전달되지 않고 자연스럽게 하위 구성 요소로 전달됩니다. 이렇게 하면 하위 구성 요소가 실수로 상위 구성 요소의 상태를 수정하는 것을 방지할 수 있습니다. 그렇지 않으면 응용 프로그램의 데이터 흐름이 쉽게 혼란스러워지고 이해하기 어려워집니다. 🎜또한 상위 구성 요소가 업데이트될 때마다 모든 하위 구성 요소의 props가 최신 값으로 업데이트됩니다. 즉, prop는 >, 이렇게 하면 Vue가 콘솔에 경고를 표시합니다. 🎜🎜🎜🎜실제 개발 프로세스에서는 일반적으로 prop 수정으로 이어지는 두 가지 시나리오가 있습니다. 🎜
🎜prop는 초기 값을 전달하는 데 사용됩니다. 하위 구성 요소는 나중에 이를 로컬 데이터 속성으로 사용하려고 합니다. 이 경우 새로운 로컬 데이터 속성을 정의하고 props에서 초기 값을 가져오는 것이 가장 좋습니다. 🎜🎜들어오는 prop 값을 추가로 변환해야 합니다. prop 값을 기반으로 계산된 속성을 정의하는 것이 더 좋습니다. 🎜
🎜🎜🎜실제로 상위 구성 요소의 속성을 변경하려면 상위 구성 요소가 변경되도록 이벤트를 emit해야 합니다. 객체나 배열이 props로 전달되면 하위 구성 요소가 props 바인딩을 변경할 수 없더라도 여전히 내부 콘텐츠를 변경할 수 있습니다. 객체 또는 배열. 이는 JS 객체와 배열이 참조로 전달되기 때문이며, Vue의 경우 이러한 변경을 금지할 수는 있지만 엄청난 성능 손실이 발생하고 이득보다 이득이 크기 때문입니다. 🎜🎜

Vue Router의 일반적인 라우팅 모드와 원칙은 무엇입니까?

🎜1. 해시 모드: 🎜

🎜location.hash값은 URL에서 # 다음에 오는 것입니다. 해시가 URL에 나타나더라도 HTTP 요청에는 포함되지 않고 백엔드에 전혀 영향을 미치지 않으므로 해시를 변경해도 페이지가 다시 로드되지 않는 것이 특징입니다. 🎜🎜hash(window.location.hash)를 변경할 때마다 window.addEventListener("hashchange", funcRef, false) 해시 변경에 대한 수신 이벤트를 추가할 수 있습니다. , 브라우저의 접속 내역에 기록을 추가하고 위의 해시 특성을 이용하면 페이지를 다시 요청하지 않고도 뷰를 업데이트하는 프런트엔드 라우팅 기능을 구현할 수 있습니다. 🎜기능: 호환성은 좋지만 아름답지는 않습니다🎜🎜

🎜2. 기록 모드: 🎜🎜HTML5 기록 인터페이스 코드에서 새로운 pushState() 및 replaceState() 사용> 방법. 🎜이 두 가지 메소드는 현재 존재하는 <code>back, forward, go를 기반으로 브라우저의 히스토리 스택에 적용됩니다. 역사적 기록을 수정합니다. 🎜이 두 가지 방법에는 한 가지 공통점이 있습니다. 브라우저 기록 스택을 수정하기 위해 호출되면 현재 URL이 변경되었더라도 브라우저는 페이지를 새로 고치지 않습니다. 이로 인해 단일 페이지 애플리케이션 프런트엔드 라우팅에 문제가 발생합니다. "보기를 업데이트하지만 다시 요청하지 않음" 페이지는 기본 🎜기능을 제공합니다. 기능: 아름답지만 새로 고칠 때 404가 나타나며 백엔드 구성이 필요합니다. 🎜

동적 라우팅?

주어진 일치 패턴으로 경로를 동일한 구성 요소에 매핑해야 하는 경우가 많습니다. 이 경우 동적 라우팅을 정의해야 합니다. 예를 들어, 서로 다른 ID를 가진 모든 사용자를 렌더링하는 데 사용해야 하는 User 구성 요소가 있습니다. 그런 다음 vue-router의 라우팅 경로에서 동적 세그먼트(동적 세그먼트)를 사용하여 이 효과를 얻을 수 있습니다. {path: '/user/:id', compenent: User} , 여기서 <code>:id는 동적 경로 매개변수입니다. 动态路径参数（dynamic segment）来达到这个效果：{path: '/user/:id', compenent: User}，其中:id就是动态路径参数。

对Vuex的理解？

• 概念：
  Vuex 是 Vue 专用的状态管理库，它以全局方式集中管理应用的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  

• 解决的问题：
  Vuex 主要解决的问题是多组件之间状态共享。利用各种通信方式，虽然也能够实现状态共享，但是往往需要在多个组件之间保持状态的一致性，这种模式很容易出问题，也会使程序逻辑变得复杂。Vuex 通过把组件的共享状态抽取出来，以全局单例模式管理，这样任何组件都能用一致的方式获取和修改状态，响应式的数据也能够保证简洁的单向流动，使代码变得更具结构化且易于维护。
  

• 什么时候用:
  Vuex 并非是必须的，它能够管理状态，但同时也带来更多的概念和框架。如果我们不打算开发大型单页应用或应用里没有大量全局的状态需要维护，完全没有使用Vuex的必要，一个简单的 store 模式就够了。反之，Vuex将是自然而然的选择。

• 用法：
  Vuex 将全局状态放入state对象中，它本身是一颗状态树，组件中使用store实例的state访问这些状态；然后用配套的mutation方法修改这些状态，并且只能用mutation修改状态，在组件中调用commit方法提交mutation；如果应用中有异步操作或复杂逻辑组合，需要编写action，执行结束如果有状态修改仍需提交mutation，组件中通过dispatch派发action。最后是模块化，通过modules选项组织拆分出去的各个子模块，在访问状态（state）时需注意添加子模块的名称，如果子模块有设置namespace，那么提交mutation和派发action时还需要额外的命名空间前缀。

页面刷新后Vuex 状态丢失怎么解决？

Vuex 只是在内存中保存状态，刷新后就会丢失，如果要持久化就需要保存起来。

localStorage就很合适，提交mutation的时候同时存入localStorage，在store中把值取出来作为state的初始值即可。

也可以使用第三方插件，推荐使用vuex-persist插件，它是为 Vuex 持久化储存而生的一个插件，不需要你手动存取storage，而是直接将状态保存至 cookie 或者 localStorage中。

关于 Vue SSR 的理解？

SSR即服务端渲染（Server Side Render）

Vuex에 대한 이해? 🎜🎜

• 🎜개념:
  Vuex는 Vue 전용 상태 관리 라이브러리로, 전역 방식으로 애플리케이션 상태를 중앙에서 관리합니다. 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다.
  🎜
• 🎜해결된 문제:
  Vuex가 해결하는 주요 문제는 여러 구성 요소 간의 상태 공유입니다. 다양한 통신 방법을 사용하여 상태 공유를 달성할 수도 있지만 여러 구성 요소 간의 상태 일관성을 유지해야 하는 경우가 많습니다. 이 모델은 문제가 발생하기 쉽고 프로그램 논리를 복잡하게 만듭니다. Vuex는 구성 요소의 공유 상태를 추출하고 전역 싱글톤 모드에서 관리하므로 모든 구성 요소가 일관된 방식으로 상태를 얻고 수정할 수 있습니다. 또한 간단한 단방향 흐름을 보장하여 코드를 보다 효율적이고 쉽게 만듭니다. 유지하기 위해.
  🎜
• 🎜사용 시기:
  Vuex는 필요하지 않으며 상태를 관리할 수 있지만 더 많은 개념과 프레임워크를 제공합니다. 대규모 단일 페이지 애플리케이션을 개발할 계획이 없거나 애플리케이션에서 유지 관리할 전역 상태가 많지 않은 경우에는 Vuex를 사용할 필요가 없습니다. 간단한 저장 모드이면 충분합니다. 그렇지 않으면 Vuex가 자연스러운 선택이 될 것입니다. 🎜
• 🎜사용법:
  Vuex는 그 자체가 상태 트리인 state 객체에 전역 상태를 넣습니다. 구성 요소에서 store를 사용하세요. >인스턴스의 state는 이러한 상태에 액세스한 다음 일치하는 mutation 메서드를 사용하여 이러한 상태를 수정하고 mutation을 사용하여만 수정할 수 있습니다. 상태, 구성 요소에서 commit 메서드를 호출하여 mutation을 제출합니다. 애플리케이션에 비동기 작업이나 복잡한 논리 조합이 있는 경우 action을 작성해야 합니다. code> 실행 후 상태 수정이 있는 경우에도 mutation을 제출해야 하며 구성 요소는 dispatch를 통해 action을 전달합니다. 마지막 단계는 모듈화입니다. 분할된 하위 모듈을 구성하려면 하위 모듈의 이름을 추가해야 합니다. code>네임스페이스

설정, code>, 변형을 제출하고 action을 디스패치할 때 추가 네임스페이스 접두사가 필요합니다. 🎜

🎜페이지 새로 고침 후 Vuex 상태 손실 문제를 해결하는 방법은 무엇입니까? 🎜🎜🎜Vuex는 상태를 메모리에만 저장하며 새로 고친 후에는 손실됩니다. 지속하려면 상태를 저장해야 합니다. 🎜🎜localStorage는 mutation을 제출할 때 localStorage에도 저장되고 store <code>state의 초기 값으로 사용하면 됩니다. 🎜🎜타사 플러그인을 사용할 수도 있습니다. vuex-persist 플러그인을 사용하는 것이 좋습니다. 이는 Vuex 영구 저장소용 플러그인이므로 수동으로 수행할 필요가 없습니다. storage에 액세스하되 상태를 cookie 또는 localStorage에 직접 저장하세요. 🎜

🎜Vue SSR에 대해 이해하셨나요? 🎜🎜🎜SSR은 Server Side Render(Server Side Render)로, Vue 렌더링 태그 작업을 서버 측 클라이언트 측에서 HTML로 완료하는 것입니다. 그런 다음 html이 클라이언트에 직접 반환됩니다. 🎜

• 장점:
  SEO가 더 좋고 첫 화면이 더 빨리 로드됩니다.
• 단점:
  개발 조건이 제한됩니다. 외부 확장 라이브러리가 필요한 경우 서버 측 렌더링 애플리케이션도 Node.js에 있어야 합니다. js 실행 환경. 서버의 로드 요구 사항이 더 커집니다.

어떤 Vue 성능 최적화 방법을 알고 있나요?

• 경로 로딩이 지연됩니다. 애플리케이션 크기를 효과적으로 분할하고 액세스 시 비동기적으로 로드합니다.
• 연결 유지는 페이지를 캐시합니다. 구성 요소 인스턴스의 중복 생성을 방지하고 캐시된 구성 요소 상태를 유지합니다. keep-alive缓存页面。避免重复创建组件实例，且能保留缓存组件状态。
• v-for遍历避免同时使用v-if。实际上在 Vue 3 中已经是一个错误用法了。
• 长列表性能优化，可采用虚拟列表。
• v-once。不再变化的数据使用v-once
v-for 순회는 v-if를 동시에 사용하는 것을 방지합니다. 실제로 Vue 3에서는 이미 잘못된 사용법입니다.
• 긴 목록 성능 최적화, 가상 목록을 사용할 수 있습니다.
• v-once. 더 이상 변경되지 않는 데이터에는 v-once를 사용하세요.
• 이벤트 파괴. 구성 요소가 삭제되면 전역 변수와 타이머도 삭제됩니다.
• 사진이 게으르게 로드되었습니다.
• 필요 시 타사 플러그인이 도입됩니다.

하위 구성요소 분할. 더 무거운 상태 구성 요소는 분할에 적합합니다. 서버 측 렌더링.

(학습 영상 공유: 🎜vuejs 입문 튜토리얼🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 [편집 및 공유] 일반적인 Vue 인터뷰 질문 몇 가지(답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!