[편집 및 요약] 지식 포인트를 통합하는 데 도움이 되는 45개 이상의 Vue 인터뷰 질문!

이 기사는 기본 지식을 정리하고 Vue 지식 보유량을 높이는 데 도움이 되는 몇 가지 Vue면접 질문(답변 분석 포함)을 요약하고 공유합니다.

1. Vue 라이프사이클을 간략하게 설명하세요

아이디어 답변:

• Vue 라이프사이클이 무엇인가요? Vue 生命周期是什么？

• Vue 生命周期有哪些阶段？

• Vue 生命周期的流程？

• 结合实践

• 扩展：在 Vue3 变化 Vue Vue 라이프사이클의 단계는 무엇인가요?

Vue 라이프 사이클 프로세스?

• Combined with practice

  Vue 的生命周期也是如此，在 Vue 中的每个组件都会经历从创建到挂载到更新再到销毁这几个阶段，而在这些阶段中，Vue 会运行一种叫做生命周期钩子的函数，方便我们在特定的阶段有机会添加上我们自己的代码。

• Vue 生命周期总共可以分为 8 各阶段：创建前后、挂载前后、更新前后、销毁前后，以及一些特殊场景的生命周期（keep-alive 激活时、捕获后代组件错误时）。Vue3 中还新增了三个用于调试和服务端渲染场景。

• 这几个阶段对应的钩子函数 API依次为：beforeCreate create beforeMount mounted beforeUpdate updated activated(keep-alive 激活时调用) deactivated(keep-alive 停用时调用) beforeDestory destoryed errorCaptured（捕获子孙组件错误时调用）。

  在 Vue3 中的变化 绝大多数只要加上前缀 on 即可，比如 mounted 变为 onMounted，除了 beforeDestroy 和 destroyed 被重新命名为 beforeUnmount 和 unMounted（这样与前面的 beforeMount 和 mounted 对应，强迫症表示很赞?）

• beforeCreate 在组件创建前调用，通常用于插件开发中执行一些初始化任务；created 组件创建完毕调用，可以访问各种数据，请求接口数据等；mounted 组件挂载时调用 可以访问数据、dom 元素、子组件等；beforeUpdate 更新前调用 此时 view 层还未更新，可用于获取更新前的各种状态；updated 完成更新时调用 此时view层已经完成更新，所有状态已经是最新的了；beforeUnmount 实例被销毁前调用，可用于一些定时器或订阅的取消；unMounted 销毁一个实例时调用 可以清理与其他实例的链接，解绑它的全部指令以及事件监听器。

• 在 Vue3 中： setup 是比 created 先执行的； 而且没有 beforeCreate 和  created

  확장: Vue3 Vue 수명 주기 변경 사항 [관련 권장 사항:
vuejs 비디오 튜토리얼

,

웹 프런트 엔드 개발 ]

• 답예:
  🎜🎜생애주기라는 단어는 이해하기 쉬워야 하며 우리 삶에서 자주 접하게 됩니다. 이생의 아기, 어린이, 청소년, 청소년, 중년 및 노인. Vue의 수명 주기도 마찬가지입니다. Vue의 각 구성 요소는 🎜creation🎜부터 🎜mounting🎜, 🎜update🎜, 그리고 🎜까지의 과정을 거칩니다. destroy🎜 여러 단계, 그리고 이 단계에서 Vue는 🎜생명주기 후크🎜라는 기능을 실행하므로 특정 단계에서 자체 코드를 추가할 수 있습니다. 🎜🎜🎜🎜Vue 라이프 사이클은 8 단계로 나눌 수 있습니다: 🎜생성 전과 후🎜, 🎜마운트 전과 후🎜, 🎜업데이트 전과 후🎜, 🎜파괴 전과 후🎜, as 그리고 일부 특별한 🎜시나리오 🎜라이프 사이클(활성화 시 🎜연결 유지🎜, 🎜하위 구성 요소 오류를 포착할 때🎜). Vue3에는 🎜디버깅 및 서버 측 렌더링을 위한 세 가지 새로운 장면🎜도 추가되었습니다. 🎜🎜🎜🎜이러한 단계에 해당하는 후크 함수 API는 다음과 같습니다. 🎜beforeCreate create beforeMount mounted beforeUpdate 업데이트됨 활성화됨(연결 유지가 활성화될 때 호출됨) 비활성화됨(연결 유지가 비활성화될 때 호출됨) beforeDestory destoryed errorCaptured(하위 구성 요소 오류를 캡처할 때 호출됨)🎜. 🎜🎜Vue3의 대부분의 변경 사항에는 on이라는 접두사가 붙으면 됩니다. 예를 들어 🎜mounted🎜는 🎜onMounted🎜가 됩니다. 단, 🎜beforeDestroy 코드는 예외입니다. >🎜 및 🎜<code>destroyed🎜는 🎜beforeUnmount🎜 및 🎜unMounted🎜로 이름이 변경되었습니다(이전 🎜와 일치함). beforeMount🎜는 🎜<code>mounted🎜에 해당합니다. 강박 장애는 대단한 의미인가요?)🎜🎜🎜🎜🎜beforeCreate🎜는 구성 요소 생성 전에 호출되며 일반적으로 다음에서 사용됩니다. 플러그인 개발 일부 초기화 작업을 수행합니다. 🎜생성됨🎜 구성 요소가 생성된 후 호출되며 다양한 데이터에 액세스하고 인터페이스 데이터 등을 요청할 수 있습니다. 🎜마운트🎜 호출됩니다. 구성 요소가 마운트되면 데이터, dom 요소, 하위 구성 요소 등에 액세스할 수 있습니다. 🎜beforeUpdate🎜는 업데이트 전에 호출됩니다. >view 레이어는 업데이트되지 않았으며, 업데이트 이전에 다양한 정보를 얻을 수 있습니다. 🎜updated🎜 업데이트가 완료되면 호출됩니다. 업데이트가 완료되었으며 모든 상태가 이미 최신 상태입니다. 🎜beforeUnmount🎜 인스턴스가 삭제되기 전에 호출되어 사용할 수 있습니다. 일부 타이머 또는 구독 취소 🎜unmounted 🎜 다른 인스턴스와의 링크를 정리하기 위해 인스턴스를 삭제할 때 호출되며 모든 명령과 이벤트 리스너를 바인딩 해제합니다. 🎜🎜🎜🎜Vue3에서는 🎜setup이 created 전에 실행됩니다. 🎜; 그리고 beforeCreate 및 created 코드가 없습니다. >🎜. 🎜🎜🎜🎜🎜2. Vue에서 권한 관리를 수행하는 방법🎜🎜🎜🎜🎜권한 관리에 대한 일반적인 요구 사항은 페이지 권한과 버튼 권한을 관리하는 것입니다🎜

• 구체적인 구현은 프런트엔드 구현과 백엔드 구현의 두 가지 솔루션으로 나뉩니다. 프런트엔드 솔루션은 프런트엔드에서 모든 라우팅 정보를 구성하고 사용자가 라우팅 가드를 통해 로그인하도록 요구합니다. 사용자가 로그인한 후 라우팅 테이블은 해당 역할에 따라 필터링되고 라우팅됩니다. 동적으로 추가됩니다. 예를 들어, asyncRoutesasyncRoutes 数组，需要认证的页面在路由的 meta 中添加一个 roles 字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。过滤结束后剩下的路由就是用户能访问的页面，最后通过 router.addRoutes(accessRoutes) 方式动态添加路由即可。

  后端方案会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有路由信息返回给前端，前端再通过 addRoute 动态添加路由信息。

  按钮权限的控制通常会实现一个指令，例如 v-permission，将按钮要求角色通过值传给 v-permission 指令，在指令的 mounted 钩子中可以判断当前用户角色和按钮是否存在交集，有就保留按钮，没有就移除按钮。

• 纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码和重新打包部署；服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息。

自己的话：权限管理一般分页面权限和按钮权限，而具体实现方案又分前端实现和后端实现，前端实现就是会在前端维护一份动态的路由数组，通过用户登录后的角色来筛选它所拥有权限的页面，最后通过 addRoute 将动态添加到 router 배열을 구성하고 인증이 필요한 페이지는 경로의 v-permissionmeta에

roles

필드를 추가합니다. > 등 사용자 역할을 획득한 후 둘의 교차점을 취하면 결과가 비어 있지 않으면 액세스할 수 있다는 의미입니다. 필터링 후 남은 경로는 사용자가 액세스할 수 있는 페이지입니다. 마지막으로 router.addRoutes(accessRoutes)

를 통해 경로를 동적으로 추가할 수 있습니다.

백엔드 솔루션은 모든 페이지 라우팅 정보를 데이터베이스에 저장

합니다. 사용자가 로그인하면 액세스할 수 있는 모든 라우팅 정보가 역할 쿼리를 기반으로 프런트엔드로 반환됩니다. end는

addRoute
• 를 전달합니다. 라우팅 정보를 동적으로 추가합니다.
  버튼 권한 제어는 일반적으로

• 와 같은

  명령을 구현
하고 값에 따라 버튼에 필요한 역할을

• 명령에 전달합니다. 현재 상태는
마운트됨에서 확인할 수 있습니다. code>
• 명령의 후크 사용자 역할과 버튼 사이에 교차점이 있는지 여부. 그렇다면 버튼을 제거하십시오.

• 순수 프론트엔드 솔루션의 장점은 구현이 간단하고

  페이지 관리에 추가 권한이 필요하지 않다는 것입니다. 하지만 새로운 페이지와 역할 요구 사항이 있는 경우 유지 관리가 큰 문제입니다. 프런트 엔드 코드를 수정하고

  배포를 위해 다시 패키지해야 합니다

서버 측 솔루션에는 이 문제가 없습니다

. 전용 역할 및 권한 관리 페이지를 통해 페이지 및 버튼 권한 정보가 데이터베이스에 구성됩니다. 애플리케이션은 로그인할 때마다 최신 라우팅 정보를 얻습니다.

• 내 말:

  권한 관리는 일반적으로 페이지 권한과 버튼 권한으로 나누어지며, 구체적인 구현 계획은 프런트 엔드 구현과 백엔드 구현으로 나누어져 동적 라우팅을 유지합니다. 사용자가 로그인한 후 권한이 있는 페이지를 필터링하고 마지막으로 addRoute를 통해 router에 동적으로 추가하는 역할입니다. 구현은 이러한 경로가 백엔드에서 프런트엔드로 반환되고 프런트엔드에서 동적으로 추가된다는 것입니다. 버튼 권한은 일반적으로 v-model ，它可以绑定一个响应式数据到视图，同时视图中变化也能改变该值。

• v-model 是一个语法糖，它的原理（默认请情况下）就是通过 :value 将变量挂到 dom 上，再通过 input事件 监听 dom 的变化改变变量的值。使用 v-model的好处就是方便呀，减少了大量的繁琐的事件处理，提高开发效率。

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

• 可以结合修饰符做进一步限定（lazy/number/trim）,用在自定义组件上时有些不同，它相当于是给了子组件一个 modelValue 的 属性 和 update:modelValue 的 事件; 在 Vue3 中还可以用参数形式指定多个不同的绑定，如 v-model:foo 这个时候就相当于 给了子组件一个 foo 的 属性 和 update:foo 的事件。

• v-model作为一个指令，它的原理就是 Vue 编译器会把它转换成 value属性绑定和input的监听事件，上面说过是默认情况下，实际上编译器会根据表单元素的不同分配不同的事件，比如 checkbox 和 radio 类型的input 会转换为 checked 和 change 事件。

4. Vue 组件之间通信有哪些？

Vue 组件之间通信有以下这么几种：

• props를 구현하여 사용자에게 권한이 있는지 확인하여 버튼 표시 여부를 제어합니다. 순수 프런트 엔드 솔루션의 장점은 구현이 간단하지만 유지 관리 문제가 크다는 것입니다. 새로운 페이지 및 역할 요구 사항이 있는 경우 코드를 변경하고 다시 패키징하여 배포해야 합니다. 서버 측.

  🎜🎜3. Vue🎜🎜🎜🎜아이디어 답변: 🎜🎜🎜🎜🎜양방향 바인딩이란 무엇인가요? 🎜🎜🎜🎜양방향 바인딩의 이점은 무엇인가요? 🎜🎜🎜🎜양방향 바인딩은 어디에 사용하나요? 🎜🎜🎜🎜양방향 바인딩 사용 방법, 사용법 세부 사항, Vue3의 변경 사항🎜🎜🎜🎜원칙 구현 설명🎜🎜🎜🎜🎜답변: 🎜🎜🎜🎜🎜Vue의 양방향 바인딩은 지시문 v입니다. -model은 반응형 데이터를 뷰에 바인딩할 수 있으며, 뷰의 변경 사항도 값을 변경할 수 있습니다. 🎜🎜🎜🎜v-model은 기본적으로 :value >를 통해 변수를 dom에 걸어 두는 것입니다. 그런 다음 input 이벤트를 통해 dom의 변경 사항을 수신하여 변수 값을 변경합니다. v-model을 사용하면 편리하고 지루한 이벤트 처리가 많이 줄어들며 개발 효율성이 향상된다는 장점이 있습니다. 🎜🎜🎜🎜일반적으로 v-model 양식에 사용되며 특정 값 입력 및 출력 제어를 나타내기 위해 사용자 정의 구성 요소에도 사용할 수 있습니다. 🎜🎜🎜🎜 수정자(lazy/number/trim)를 결합하여 추가로 제한할 수 있습니다. 이는 사용자 정의 구성 요소에 사용할 때 약간 다릅니다. 이는 하위 구성 요소에 modelValue 속성을 ​​제공하는 것과 같습니다. update:modelValue 이벤트; Vue3에서는 v-model:foo와 같은 매개변수 형식으로 여러 다른 바인딩을 지정할 수도 있습니다. 하위 구성 요소에 foo 속성과 update:foo 이벤트를 제공합니다. 🎜🎜🎜🎜v-model은 지시문입니다. Vue 컴파일러는 이를 🎜값 속성 바인딩 및 입력 수신 이벤트🎜로 변환합니다. 컴파일러는 다양한 양식 요소에 따라 다양한 이벤트를 할당합니다. 예를 들어 input의 checkbox 및 radio 유형은 checked 및 <code>변경 이벤트. 🎜🎜🎜🎜🎜4. Vue 구성 요소 간의 통신은 무엇입니까? 🎜🎜🎜🎜Vue 구성 요소에는 다음과 같은 유형의 통신이 있습니다. 🎜🎜🎜🎜🎜props🎜

• $emit, $on, $off, $once(후자의 세 개는 Vue3에서는 더 이상 사용되지 않음)$emit、$on、$off、$once（后三者在Vue3中已被废除）

• $children(Vue3中废除)、$parent

• $attrs、$listeners（Vue3中废除）

• ref

• $root

• eventbus （Vue3中不好使了，需要自己封装）

• vuex、pinia

• provide + inject

以上的方法长按使用场景可以分为：

• 父子组件之间可以使用

  props /$emit/ $parent/ ref /$attrs

• 兄弟组件之间可以使用

  $parent / $root/ eventbus / vuex

• 跨层及组件之间可以使用

  eventbus / vuex pinia / provide + inject

5.你了解哪些 Vue 性能优化方法?

• 路由懒加载：有效拆分 App 尺寸，访问时才异步加载

const router = createRouter({
    routes: [
        { path : '/foo', component: () => import('./foo.vue)}
    ]
})

• keep-alive 缓存页面：避免重复创建组件实例，且能保存缓存组件状态

<keep-alive>
  <router-view v-if="$route.meta.keepAlive == true"></router-view>
</keep-alive>
<router-view v-if="$route.meta.keepAlive != true"></router-view>

• 使用 v-show 复用 DOM：避免重复创建组件

• v-for 遍历避免同时使用 v-if（实际上这在 Vue3 中是错误的写法）

• v-once 和 v-memo: 不再变化的数据使用 v-once；按条件跳过更新时使用 v-memo

• 长列表性能优化：如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容。一些开源库（vue-virtual-scroller / vue-virtual-scroll-grid）

• 事件的销毁：Vue组件销毁时，会自动解绑它的全部指令以及事件监听器，但是仅限于组件本身的事件。

• 图片懒加载，自定义 v-lazy 指令 （参考项目：vue-lazyload）

• 第三方插件按需引入 element-plus 避免体积太大

• 子组件分割策略：较重的状态组件适合拆分

• SSR 服务端渲染 解决首屏渲染慢的问题

6. 刷新后 Vuex 状态丢失怎么解决？

思路：

• 刷新后 Vuex 状态为什么会丢失？

• 解决方法

• 第三方库以及原理探讨

• 个人理解

回答：

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

• 可以是用 localStorage 存储 Vuex 的状态，store 中把值取出来作为 state 的初始值，提交 mutation 的时候就存入 localStorage。

• 可以用 vuex-persist、vuex-persistedstate 这种插件，可以通过插件选项控制哪些需要持久化。内部的原理就是通过订阅 mutation 变化做统一处理。

• 这里有两个问题，一是如果用户手动改了 localStorage怎么办？那我 Vuex 里的状态不是也改变了？二是由于 localStorage API 的原因只能存储字符串，所以我们只能将数据通过 JSON.stringify 转换为字符串，而当我们存储的数据为 Map、Set、Function 这种引用类型的数据时，JSON.stringify 转换后会变味 {} 而丢失。

对应第一个问题我的解决方法是可以通过 监听 storage 事件来清除数据

window.addEventListener("storage", function () {
    localStorage.clear();
    window.location.href = '/login'
    console.error("不要修改localStorage的值~~~");
});

对于第二个问题没办法了，只能选择不适用 Map 和 Set 这种引用类型。

7. Vue3 为什么用 Proxy 替代 defineProperty ?

思路：

• 属性拦截的几种方式

• defineProperty的问题

• Proxy的优点

• 其他考量

回答：

• JS 中做属性拦截常见的方式有三种：defineProperty、getter/setters 和 Proxy

  🎜🎜$children(Vue3에서는 더 이상 사용되지 않음), $parent🎜🎜🎜🎜$attrs, $listeners(Vue3에서 폐지)🎜🎜🎜🎜ref🎜🎜🎜🎜$ 루트 🎜🎜🎜🎜eventbus (Vue3에서는 사용하기 쉽지 않으므로 직접 캡슐화해야 함)🎜🎜🎜🎜vuex code>, pinia🎜🎜🎜🎜provide + inject🎜🎜

🎜위의 방법 길게 누르기 사용 시나리오는 다음과 같이 나눌 수 있습니다. 🎜

🎜🎜상위 구성 요소와 하위 구성 요소 간에 사용할 수 있습니다🎜🎜props /$emit/ $parent / ref /$attrs🎜🎜🎜🎜형제 구성 요소 간에 사용할 수 있습니다🎜🎜$parent / $root / eventbus / vuex🎜🎜🎜🎜계층 전체와 구성요소 간에 사용할 수 있습니다🎜🎜eventbus / vuex pinia / 제공 + 주입🎜🎜

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

🎜🎜지연 로딩 경로: 앱 크기를 효과적으로 분할하고, 액세스할 때만 비동기식으로 로드🎜🎜

{
  path: '/login',
  component: () => import('../views/login/Login.vue')
},

🎜🎜keep-alive 캐시 페이지: 구성 요소 인스턴스를 반복적으로 생성하지 않고 캐시된 구성 요소 상태를 저장합니다🎜🎜

{
  path: '/login',
  component: () => import(/* webpackChunkName: "login" */'../views/login/Login.vue')
},

🎜🎜v-show를 사용하여 DOM 재사용: 반복적인 구성 요소 생성 방지🎜🎜🎜🎜v-for 이동 를 동시에 사용하지 마세요. v-if (실제로 이는 Vue3에서 작성하는 잘못된 방법입니다.) 🎜🎜🎜🎜v-once 및 v-memo : 더 이상 변경되지 않는 데이터 v-once를 사용하고 조건부로 업데이트를 건너뛸 때 v-memo를 사용하세요. 🎜🎜🎜🎜긴 목록 성능 최적화: 그렇다면 큰 데이터의 긴 목록, 가상 스크롤링은 작은 영역에서만 콘텐츠를 렌더링할 수 있습니다. 일부 오픈 소스 라이브러리(vue-virtual-scroller / vue-virtual-scroll-grid) 🎜🎜🎜🎜 이벤트 소멸: Vue 구성 요소가 소멸되면 자동으로 바인딩이 해제됩니다. 모든 지시어와 이벤트 리스너, 그러나 구성 요소 자체의 이벤트만 해당됩니다. 🎜🎜🎜🎜이미지 지연 로딩, 사용자 정의 v-lazy 지침(참조 프로젝트: vue-lazyload) 🎜🎜🎜🎜타사 플러그인에 도입 요소 온디맨드 -plus 너무 큰 것을 피하세요🎜🎜🎜🎜하위 구성 요소 분할 전략: 무거운 상태 구성 요소는 분할에 적합합니다🎜🎜🎜🎜SSR 서버 측 렌더링은 다음 문제를 해결합니다. 느린 첫 화면 렌더링🎜 🎜

6. 새로 고침 후 Vuex 상태 손실 문제를 해결하는 방법은 무엇입니까?

🎜아이디어: 🎜

🎜🎜새로 고침 후 Vuex 상태가 사라지는 이유는 무엇입니까? 🎜🎜🎜🎜솔루션🎜🎜🎜🎜타사 라이브러리 및 원칙에 대한 토론🎜🎜🎜🎜개인적 이해🎜🎜

🎜답변:🎜

🎜🎜Vuex는 상태를 메모리에만 저장하기 때문에 새로 고침 후에는 상태가 손실됩니다. 지속하려면 저장해야 합니다. 🎜🎜🎜🎜 localStorage를 사용하여 Vuex의 상태를 저장하고 store에서 상태로 값을 가져올 수 있습니다. code> mutation이 제출되면 초기 값은 localStorage에 저장됩니다. 🎜🎜🎜🎜 vuex-persist 및 vuex-persistedstate와 같은 플러그인을 사용할 수 있으며 플러그인 옵션을 통해 유지해야 하는 플러그인을 제어할 수 있습니다. 내부 원칙은 mutation 변경 사항을 구독하여 통합 처리를 수행하는 것입니다. 🎜🎜🎜🎜여기에 두 가지 질문이 있습니다. 하나는 사용자가 localStorage를 수동으로 변경하는 경우 어떻게 될까요? 그러면 내 Vuex의 상태도 바뀌지 않았나요? 둘째, localStorage API는 문자열만 저장할 수 있기 때문에 JSON.stringify를 통해서만 데이터를 문자열로 변환할 수 있으며, 우리가 저장하는 데이터가 Map, Set, Function, JSON.stringify는 {} 변환 후 변경되어 손실됩니다. . 🎜🎜

🎜첫 번째 문제의 해결책은 storage 이벤트를 듣고 데이터를 지우는 것입니다🎜

+ |- /src
+   |- /assets 存放资源
+     |- /img   
+     |- /css   
+     |- /font   
+     |- /data   
+   |- base-ui  存放多个项目中都会用到的公共组件
+   |- components 存放这个项目用到的公共组件
+   |- hooks 存放自定义hook
+   |- views 视图
+   |- store 状态管理
+   |- router 路由
+   |- service 网络请求
+   |- utils 工具
+   |- global 全局注册、全局常量..

🎜두 번째 문제는 해당 없음을 선택할 수밖에 없습니다Map 및 Set은 참조 유형입니다. 🎜

7. Vue3가 왜 DefineProperty 대신 프록시를 사용하나요?

🎜아이디어:🎜

🎜🎜속성 가로채기의 여러 가지 방법🎜🎜🎜🎜defineProperty 문제🎜🎜🎜🎜프록시의 장점🎜🎜🎜🎜기타 고려 사항🎜🎜

🎜답변: 🎜

🎜🎜JS 속성을 ​​가로채는 세 가지 일반적인 방법이 있습니다: defineProperty, getter/setters 및 프록시🎜

• Vue2 中使用 defineProperty 的原因是， 2013 年只能使用这种方式，由于该 API 存在一些局限性，比如对于数组的拦截有问题，为此 Vue 需要专门为数组响应式做一套实现。另外不能拦截那些新增、删除属性；最后 defineProperty 方案在初始化时需要深度递归遍历处理对象才能对它进行完全拦截，明显增加了初始化的时间。

• 以上两点在 Proxy 出现后迎刃而解，不仅可以对数组实现拦截，还能对 Map、Set 实现拦截；另外 Proxy 的拦截也是懒处理行为，如果用户没有访问嵌套对象，那么也不会实施拦截，这就让初始化的速度和内存占用改善了。

• Proxy 有兼容性问题，完全不支持IE

8. 怎么实现路由懒加载？

思路：

• 必要性

• 何时用

• 怎么用

• 使用细节

回答：

• 当打包构建时，Javascript 抱回变得非常大，影响页面加载。利用路由懒加载我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应最贱，这样更加高效，是一种优化手段。

• 一般来说，对于所有的路由都使用动态导入是个好主意

• 给 component 选项配置一个返回 Promise组件的函数就可以定义懒加载路由.例如：

{
  path: '/login',
  component: () => import('../views/login/Login.vue')
},

• 结合注释

{
  path: '/login',
  component: () => import(/* webpackChunkName: "login" */'../views/login/Login.vue')
},

vite中结合rollupOptions定义分块 5. 路由中不能使用异步组件

9. history模式 和 hash 模式有何区别？

• Vue-Router 有三个模式，其中 history 和 hash 更为常用。两者差别主要在显示形式和部署上，

• hash模式在地址栏现实的时候有一个 #，这种方式使用和部署都较简单；history模式url看起来更优雅没关，但是应用在部署时需要做特殊配置，web服务器需要做回退处理，否则会出现刷新页面404的问题。

• 在实现上 hash模式是监听hashchange事件触发路由跳转，history模式是监听popstate 事件触发路由跳转。

10. 说说 nextTick 的使用和原理？

• 在 Vue 中 nextTick 是等待下一次 DOM 更新刷新的工具方法。

• Vue 有一个异步更新策略，意思是如果数据变化，Vue 不会立刻更新 DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一时间循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在 DOM 上，此时如果想要获取更新后的 DOM 状态，就需要使用 nextTicknextTick 接受一个函数，我们可以在这个函数内部访问最新的 DOM 状态 在开发时，有两个场景我们会用到 nextTick ：

  • created 中想要获取 DOM;
  • 响应式数据变化后获取 DOM 更新后的状态;

• nextTick 的原理：在 Vue 内部，nextTick 之所以能够让我们看到 DOM 更新后的结果，是因为我们传入的 callback 会被添加到队列刷新函数的后面，这样等队列内部的更新函数都执行完毕，所有 DOM 操作也就结束了，callback 自然能够获取最新的 DOM 值。

11. v-for 和 v-if 优先级

先回答答案：在 vue2 中， v-for 的优先级更高 但是在 vue3 中， v-if 的优先级更高

拓展：无论什么时候，我们都不应该把 v-for 和 v-if 放在一起， 怎么解决呢？一是可以定义一个计算属性，让 v-for 遍历计算属性。二是可以把 if 移到内部容器里（ul ol）或者把v-for移植外部容器(template)中

vue2 문서vue3 문서

12. Vuex 상태 변경을 모니터링하는 방법은 무엇입니까?

• watch

• store.subscribe()

watch 方式，可以以字符串形式监听 $store.state.xx; subscribe 方法参数是一个回调函数，回调函数接受mutation 对象和 state 对象，可以通过 mutation.type 모니터링 대상을 결정합니다. wtach 방법은 더 간단하고 사용하기 쉬운 반면, subscribe는 조금 더 번거롭습니다. 일반적으로 vuex 플러그인이 사용됩니다(vuex 지속성 플러그인을 언급할 수 있습니다). vuex-persist , vuex-persistedstate)subscribe 会略繁琐，一般用 vuex 插件中（可以提一下vuex的持久化插件vuex-persist、vuex-persistedstate）

13. 你觉得 Vuex 有什么缺点？

• 不支持持久化，页面刷新状态就会丢失

• 使用模块比较繁琐

• 不支持 ts （或者说很不友好）

vue3 + pinia 会是更好的组合。

14. ref 和 reactive 异同点?

• 两者都能返回响应式对象，ref 返回的是一个响应式Ref 对象， reactive 返回的是响应式代理对象。

• ref 通常是处理单值得响应式，reactive 用于处理对象类型的数据响应式

• ref 需要通过 .value 访问， 在视图中会自动脱 ref，不需要 .value，ref 可以接收对象或数组但内部依然是 reactive 实现的；reactive 如果接收 Ref 对象会自动脱 ref ；使用展开运算符展开 reactive 返回的响应式对象会使其失去响应性，可以结合 toRefs()将值转换为 Ref 对象后再展开。

• reactive 内部使用 Prxoy 代理拦截对象各种操作，而 ref 内部封装一个 RefImpl 类，设置 get value/set value，拦截用户对值得访问。

16. Vue 中如何扩展一个组件？

• 逻辑扩展：mixins、extends、composition api:

• 内容扩展：slots

mixins 很灵活，但是会冲突很混乱。extends 是一个不太常用的选项，更 mixins 的不同是它只能扩展单个对象，优先级比 mixins

13. Vuex의 단점은 무엇이라고 생각하시나요?

지속성을 지원하지 않으면 페이지 새로고침 상태가 사라집니다

모듈을 사용하는 것이 더 번거롭습니다

ts를 지원하지 않습니다(또는 매우 불친절합니다)

• vue-loader 是用于处理单文件组件（SFC）的webpack loader

• 因为有了 vue-loader，我们才能用 .vue 文件形式编写代码，将代码分割为 template script style

• webpack 在打包的时候，会以 loader 的方式调用 vue-loader

• vue-loader 被执行时，它会对 SFC 中的每个语言块用单独的 loadervue3 + 피니아가 더 좋은 조합이겠네요.

14. ref와 반응형의 유사점과 차이점은 무엇인가요?

둘 다 반응형 개체를 반환할 수 있으며 ref는 반응형 Ref 개체를 반환합니다. >reactive는 반응형 프록시 객체를 반환합니다.

ref는 일반적으로 단일 값 반응을 처리하는 데 사용되며, reactive는 객체 유형 데이터 반응을 처리하는 데 사용됩니다.

🎜🎜🎜ref 필수 .value를 통해 액세스하면 ref가 뷰에서 자동으로 제거됩니다. ref는 필요하지 않습니다. 또는 배열을 수신하지만 reactive에 의해 내부적으로 구현됩니다. Refref가 자동으로 제거됩니다. /code> 객체; 확장 사용 연산자 확장 reactive에 의해 반환된 반응형 객체는 응답성을 잃게 만듭니다. 이는 toRefs()와 결합하여 값을 Ref 개체를 선택한 다음 확장합니다. 🎜🎜🎜🎜reactive는 내부적으로 Prxoy 프록시를 사용하여 객체에 대한 다양한 작업을 가로채는 반면, ref는 내부적으로 RefImpl를 캡슐화합니다. code> 클래스에서 값 가져오기/값 설정을 설정하여 값에 대한 사용자 액세스를 차단합니다. 🎜🎜🎜🎜🎜16. Vue에서 구성 요소를 확장하는 방법은 무엇입니까? 🎜🎜🎜🎜🎜논리 확장: mixins, extends, composition api: 🎜🎜🎜🎜콘텐츠 확장: Slots🎜🎜🎜🎜mixins는 유연하지만 충돌하고 혼란스럽습니다. extends는 덜 일반적으로 사용되는 옵션입니다. mixins와의 차이점은 단일 객체만 확장할 수 있고 mixins보다 우선순위가 높다는 것입니다. 🎜🎜데이터와 메소드가 혼합되어 🎜소스를 명확하게 확인할 수 없으며🎜 현재 구성 요소의 변수🎜와 이름 충돌🎜이 발생할 수 있습니다., 구성 API 이러한 문제는 매우 잘 해결될 수 있습니다. 독립 응답 모듈을 사용하면 독립 로직을 쉽게 작성하고 응답 데이터를 제공할 수 있어 코드의 가독성과 유지 관리성이 향상됩니다. 🎜🎜🎜확장: Vue.mixin(글로벌 믹스인) Vue.extend(하위 클래스를 생성하기 위한 클래스/구성 요소 상속과 약간 유사)🎜🎜🎜🎜17. 🎜🎜🎜🎜🎜vue-loader는 단일 파일 구성 요소(SFC)를 처리하는 데 사용되는 웹팩 로더입니다.🎜🎜🎜🎜vue-loader 때문에 .vue 파일 형식의 코드를 작성하고 코드를 템플릿 스크립트 스타일🎜🎜🎜🎜로 분할합니다. webpack 패키징 시 <code>vue-loader가 loader 형태로 호출됩니다🎜🎜🎜🎜vue-loader가 실행되면 , it SFC의 각 언어 블록은 별도의 로더 체인으로 처리되며, 마지막으로 이러한 개별 블록이 최종 구성 요소 모듈🎜🎜🎜🎜🎜18로 조립됩니다. Sub 구성 요소가 상위 구성 요소 데이터를 수정할 수 있습니까? 🎜🎜🎜 직접 변경할 수 없습니다. 🎜🎜컴포넌트 개발에는 단방향 데이터 흐름 원칙이 있습니다. 자식 컴포넌트에서 부모 컴포넌트의 데이터를 수정하지 않는 것이 상식입니다.🎜🎜정말로 변경해야 하는 경우 부모 컴포넌트에 이벤트를 보내주세요. 상위 구성 요소에서 내보내고 수정하여🎜

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

이를 달성하기 위해 경로에 동적 필드를 사용할 수 있습니다. 예를 들어 /users/:id 其中 :id는 경로 매개변수입니다. this.$route.parmas를 통해 얻을 수 있으며 여러 매개변수가 있을 수 있습니다. $route 객체는 query와 같은 다른 유용한 정보도 노출합니다. 코드> 해시 등 this.$route.parmas获取，参数还可以有多个， $route 对象还公开了其他有用的信息如 query hash等。

20. 说说对 Vue 数据响应式的理解

思路：

• 什么是响应式？

• 为什么vue需要响应式？

• 有什么好处？

• vue的响应式怎么实现的，有哪些优缺点？

• vue3中的响应式的新变化

回答：

• 数据响应式就是 能够监测到数据变化并且做出响应的一种机制

• 在 vue 中要解决的一个核心问题就是连接数据层和视图层，通过数据变化驱动视图更新，要做到这点就需要对数据做响应式处理。

• 通过数据响应式加上虚拟 DOM 和 patch 算法，我们只需要操作数据，关心业务，完全不需要接触繁琐的 DOM 操作，打打提升了开发效率，降低开发难度。

• vue2 中实现数据响应式的核心就是通过 Object.defineProperty() 方法对数据进行拦截，当 get 数据时做依赖收集 set 数据时做更新通知。这种机制很好的及绝了数据响应式的问题，但是实际使用也存在缺点，比如在初始化时的递归遍历会造成性能损失;无法监听新增或删除属性，在 vue 中要通过像 Vue.set/delete 这种特定的 API 才能实现对对象数组属性的添加和删除，而且也不支持 Ma、Set这些数据结构，

• 为了解决这些问题，Vue3 重写了这部分实现，利用的是 ES6 中的 Proxy 代理要响应化的数据。它有很多好处，初始化性能和内存都大幅改善，也不需要特殊的 API ，但是不支持 IE 浏览器。

21. 从 template 到 render 做了什么

问 template 到 render 的过程其实是问的 vue 编译器 工作原理。

思路：

• 引入编译器概念

• 说明编译器的必要性

• 阐述编译器工作流程

回答：

• Vue 中有个独特的编译模块，称为 compiler，它的主要作用是将 template 编译为 js 可执行的 render 函数

• 之所以需要这个编译过程是为了便于我们高校的编写试图模版。相比而言，我们还是更愿意用 HTML来编写视图，直观且高效。手写 render 函数不仅效率低下，而且失去了被编译器的优化能力。

• Vue 编译器 首先会对 template进行解析（ Parse ），结束后会得到一个抽象语法树AST，然后对 AST 进行深加工转换（transform），最后将得到的 AST 生成为 js 代码，也就是 render 函数

22. 如何缓存和更新组件

• 缓存组件可以使用 keep-alive 组件，include 和 exclude 可以指定包含不包含哪些组件。

• Vue3 结合 vue-router 使用变化非常大，之前是 keep-alive 包含 router-view，现在是 router-view 包含 keep-alive

• 缓存后如果想要获取数据可以使用 actived 钩子 或者 beforeRouteEnter（ vue-router 的一个守卫）

• keep-alive 是一个通用组件，它内部定义了一个 map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的 component 组件对应组件的 vnode，如果改组件在map中存在就直接返回它。由于 component 的 is 属性是一个响应式数据，因此只要它变化，keep-alive 的 render

  🎜20. Vue 데이터 응답성에 대한 이해를 이야기해 보세요🎜🎜🎜생각하기:🎜
  • 🎜응답성이 무엇인가요? 🎜
  • 🎜vue가 반응형이어야 하는 이유는 무엇인가요? 🎜
  • 🎜의 장점은 무엇인가요? 🎜
  • 🎜vue의 반응성은 어떻게 구현되며, 장점과 단점은 무엇인가요? 🎜
  • 🎜vue3의 반응성에 대한 새로운 변경 사항🎜
  🎜🎜답변: 🎜🎜
  • 🎜Data 응답성은 데이터 변경을 감지하고 응답할 수 있는 메커니즘입니다🎜
  • 🎜 vue에서 해결해야 할 핵심 문제는 데이터 레이어와 뷰 레이어를 연결하여 뷰 업데이트를 구동하는 것입니다. 데이터 변경을 위해서는 데이터가 즉각적으로 처리되어야 합니다. 🎜
  • 🎜데이터 응답성과 가상 DOM 및 패치 알고리즘을 사용하면 지루한 작업을 처리할 필요 없이 데이터를 운영하고 비즈니스에만 신경 쓰면 됩니다. DOM 작업을 통해 DaDa는 개발 효율성을 높이고 개발 난이도를 줄여줍니다. 🎜
  • 🎜vue2 데이터 응답성을 구현하는 핵심은 Object.defineProperty() 메서드를 통해 데이터를 가로채는 것입니다. /code> 데이터가 수집되고 종속성이 수집되며 set 데이터가 사용되면 업데이트 알림이 생성됩니다. 이 메커니즘은 데이터 응답성 문제를 해결하는 데 매우 효과적이지만 실제 사용에는 단점도 있습니다. 예를 들어 초기화 중 재귀 순회는 성능 손실을 초래합니다🎜 🎜새 속성이나 삭제된 속성을 모니터링할 수 없습니다🎜.

, 객체 배열 속성을 추가하고 삭제하려면 Vue.set/delete와 같은 특정 API를 사용해야 하며 Ma, <code>설정 이러한 데이터 구조, 🎜

🎜이러한 문제를 해결하기 위해 Vue3는 다음을 사용하여 구현의 이 부분을 다시 작성했습니다. ES6의 Proxy 프록시가 응답해야 하는 데이터입니다. 장점이 많고 초기화 성능과 메모리가 크게 향상되었으며 특별한 API가 필요하지 않지만 IE 브라우저를 지원하지 않습니다. 🎜

🎜🎜21. 템플릿에서 렌더링까지 수행되는 작업은 무엇입니까? 🎜🎜🎜템플릿에서 렌더링까지의 프로세스에 대해 묻는 것은 실제로 컴파일러의 작동 방식을 살펴보세요. 🎜🎜🎜아이디어:🎜🎜

• 🎜컴파일러의 개념 소개🎜
• 🎜컴파일러의 필요성 설명🎜
• 🎜컴파일러 작업 흐름 설명🎜

🎜🎜답변: 🎜🎜

• 🎜Vue compiler라는 고유한 컴파일 모듈이 있습니다. 주요 기능은 template을 js 실행 파일 렌더링으로 컴파일하는 것입니다. function🎜
• 🎜이 컴파일 프로세스가 필요한 이유는 우리 대학에서 뷰 템플릿 작성을 용이하게 하기 위해서입니다. 이에 비해 우리는 여전히 직관적이고 효율적인 뷰 작성을 위해 HTML을 사용하는 것을 선호합니다. render 함수를 손으로 쓰는 것은 비효율적일 뿐만 아니라 컴파일러에 의해 최적화되는 기능도 상실합니다. 🎜
• 🎜Vue 컴파일러는 먼저 템플릿( Parse )을 구문 분석한 다음 추상 구문 Tree AST

, 그런 다음 AST에서 심층 처리 변환(transform)을 수행하고 마지막으로 결과 AST를 Node.js 코드, 즉 render 함수🎜🎜🎜22 구성 요소를 캐시하고 업데이트하는 방법🎜🎜

• 🎜캐시 구성 요소는 keep-alive 구성 요소를 사용할 수 있으며 포함 및 제외는 포함하고 제외할 구성 요소를 지정할 수 있습니다. 🎜
• 🎜 vue-router와 결합된 Vue3가 이전에는 keep-alive에 를 포함하여 많이 변경되었습니다. router -view, 이제 router-view에는 keep-alive🎜
• 🎜캐싱 후 데이터를 얻으려면 다음을 수행하세요. actived 후크 또는 beforeRouteEnter(vue-router의 가드)를 사용하세요 🎜
• 🎜keep-alive 일반 구성 요소입니다. 내부적으로 <code>map을 정의하고 생성된 구성 요소 인스턴스를 캐시합니다. 반환되는 렌더링 함수는 내부적으로 해당하는 구성 요소 구성 요소를 검색합니다. 임베디드 컴포넌트 컴포넌트, code>vnode, 컴포넌트가 맵에 존재하는 경우 직접 반환합니다. 컴포넌트의 is 속성은 반응형 데이터이므로, 그것이 변경되는 한 keep-alive의 render 기능은 code>가 다시 실행됩니다. 🎜

23. 가상 DOM

• 가상 DOM이란? 가상 DOM 的本质就是一个 Javascript 对象。

• 为什么要引入虚拟 DOM의 핵심은 Javascript 개체입니다. DOM 的次数，方便实现跨平台

• 虚拟DOM如何生成？compiler 编译器会把 template 模版编译成渲染函数，接下来在 mount 挂载的过程会调用这个渲染函数，返回的对象就是 虚拟DOM 。挂载结束后，会进入更新流程。如果某些响应式数据发生变化，将会引起组件重新 render，此时会生成新的 虚拟DOM，和上次渲染结果做 diff 操作，最小量的操作 dom，从而高效更新视图。

24. 什么是异步组件

• 异步组件就是不会立即加载而是会在需要的时候加载的组件。在大型应用中，我们需要分割代码为更小的块试就可以用异步组件。

• 不仅可以在路由切换时懒加载组件，还可以在组件中使用异步组件，从而更细的分割代码。

• 使用异步组件最简单的方式是直接给 defineAsyncComponet 指定一个 loader 函数，结合 ES 模块 动态导入函数 import 可以快速实现。Vue3 还可以结合 Suspense 组件使用异步组件。

• 异步组件容易和路由懒加载混淆，实际上不是一个东西。异步组件不能被用于定义懒加载路由上，处理它的是 Vue 框架，处理路由组件加载的是 vue-router。但是可以在懒加载的路由组件中使用异步组件。

25. 说说Vue长列表优化思路

• 避免大数据量：可以采用分页的方式获取
• 避免渲染大量数据：vue-virtual-scroller等虚拟滚动方案，只渲染视口范围内的数据
• 避免更新：可以使用v-once方式只渲染一次
• 优化更新：通过v-memo缓存组数，有条件更新，提高服用，避免不必要更新
• 按需加载数据：可以采用 懒加载 方式，在用户需要的时候在加载数据。

26. computed & watch

• computed 是计算属性，watch 是侦听器。

• computed 通常用于处理模版中复杂的逻辑,而 watch 通常用于需要监听一个响应式对象的变化而做一些操作的时候

• watch 可以进行异步操作，computed 不行。

• 计算属性传递一个对象 有 set 和 get 两个选项，是它称为即可读又可写的计算属性，如果传递的是函数的话默认就是 get 选项，watch 可以传递一个对象，设置deep、immediate等选项

• vue3 中 watch 发生了一些变化，例如不能再侦测一个点操符之外的字符串表达式，reactivity API 中新出的 watch、watchEffect 可以完全替代 watch 选项，而且功能更加强大

27. SPA 和 SSR的区别是什么？

• SPA（Single Page Application）是单页面应用。一般也称为客户端渲染，简称 CSR 。SSR（Server Side Render） 即服务端渲染。一般也称为多页面应用（Mulpile Page Application），简称 MPA。

• SPA 只会首次请求 html 文件，后续只需要请求 JSON 数据即可，因此用户体验更好，节约流量，服务端压力也较小。但是首屏加载的时间会变长，而且 SEO 不友好。为了解决以上缺点，就有了 SSR 方案，由于 HTML 内容在服务器一次性生成出来，首屏加载快，搜索引擎也可以很方便的抓取页面信息。但同时 SSR 方案也会有性能，开发受限等问题。

• 选择上，如果有首屏加载优化需求，SEO需求时，就可以考虑SSR。

• 但并不是只有这一种替代方案，比如对一些不常变化的静态网站，SSR反而浪费资源，我们可以考虑预渲染的方案。另外 nuxt.js/next.js

  🎜🎜가상🎜을 도입하는 이유는 무엇인가요? (혜택) 작업 수를 효과적으로 줄이고 🎜 크로스 플랫폼 구현을 촉진할 수 있습니다 🎜🎜🎜🎜가상 DOM을 생성하는 방법은 무엇입니까? 컴파일러 컴파일러는 template 템플릿을 렌더링 함수로 컴파일합니다. 다음으로, mount의 마운트 프로세스 중에 이 렌더링 함수가 호출되고 반환된 객체는 Virtual DOM입니다. 마운트가 완료되면 업데이트 프로세스가 시작됩니다. 일부 반응형 데이터가 변경되면 구성요소가 다시 렌더링됩니다. 이때 새로운 가상 DOM이 생성되고 diff 작업, <code>dom 작업의 최소량을 완료했습니다. 🎜🎜🎜🎜🎜24. 비동기식 구성 요소란 무엇입니까? 🎜🎜🎜🎜🎜비동기 구성 요소는 즉시 로드되지 않지만 필요할 때 로드되는 구성 요소입니다. 대규모 애플리케이션에서는 코드를 더 작은 덩어리로 나누고 비동기 구성 요소를 사용해야 합니다. 🎜🎜🎜🎜라우팅이 전환될 때 구성 요소를 느리게 로드할 수 있을 뿐만 아니라 구성 요소에서 비동기 구성 요소를 사용하여 코드를 더 세밀하게 분할할 수도 있습니다. 🎜🎜🎜🎜비동기 구성요소를 사용하는 가장 간단한 방법은 loader 함수를 defineAsyncComponet에 직접 할당하고 이를 ES 모듈 동적 가져오기 함수 import를 사용하면 빠르게 완료할 수 있습니다. <code>Vue3는 Suspense 구성 요소와 함께 비동기 구성 요소를 사용할 수도 있습니다. 🎜🎜🎜🎜비동기 구성 요소는 실제로 동일한 것이 아닌 경로의 지연 로딩과 쉽게 혼동됩니다. 비동기 구성요소는 지연 로딩 경로를 정의하는 데 사용할 수 없습니다. 이는 Vue 프레임워크에 의해 처리되며 라우팅 구성요소의 로딩을 처리하는 것은 vue-router입니다. 그러나 지연 로드 라우팅 구성 요소에서는 비동기 구성 요소를 사용할 수 있습니다. 🎜🎜🎜🎜🎜25 Vue 긴 목록 최적화 아이디어에 대해 이야기해 보겠습니다. 🎜🎜
  🎜대량의 데이터 방지: 페이징을 통해 얻을 수 있습니다. 🎜🎜대량의 데이터 렌더링 방지: vue-virtual과 같은 가상 스크롤 솔루션. -스크롤러는 뷰포트 범위 내의 데이터만 렌더링합니다🎜🎜업데이트 방지: v-once 방법을 사용하여 한 번만 렌더링할 수 있습니다🎜🎜업데이트 최적화: v-memo를 통해 그룹 번호 캐시, 조건부 업데이트, 개선 Update🎜🎜요청 시 데이터 로드: 지연 로딩 방법을 사용하여 사용자가 필요할 때 데이터를 로드할 수 있습니다. 🎜🎜🎜🎜26.computed & watch🎜🎜🎜🎜🎜computed는 계산된 속성이고 watch는 리스너입니다. 🎜🎜🎜🎜computed는 일반적으로 템플릿의 복잡한 로직을 처리하는 데 사용되는 반면 watch는 일반적으로 반응형 개체의 변경 사항을 모니터링하고 일부 작업을 수행해야 할 때 사용됩니다🎜🎜 🎜🎜watch는 비동기 작업을 수행할 수 있지만 computed는 수행할 수 없습니다. 🎜🎜🎜🎜계산 속성은 읽기 및 쓰기 가능 계산 속성이라고 하는 set 및 get의 두 가지 옵션이 있는 객체를 전달합니다. 함수가 전달되면 기본값은 get
  옵션. watch는 객체를 전달하고 🎜🎜🎜🎜vue3 watch에는 몇 가지 변경이 있었습니다. 예를 들어 도트 연산자 이외의 문자열 표현식을 더 이상 감지할 수 없으며 <code>reactivity API watchEffect의 새로운 watch 및 가 있습니다. >은 <code>watch 옵션을 완전히 대체할 수 있으며 더 강력합니다🎜🎜🎜🎜🎜27 SPA와 SSR의 차이점은 무엇인가요? 🎜🎜🎜🎜🎜SPA(단일 페이지 애플리케이션)는 🎜단일 페이지 애플리케이션🎜입니다. 일반적으로 🎜클라이언트 측 렌더링🎜, 줄여서 CSR이라고도 합니다. SSR(서버 측 렌더링)은 🎜서버 측 렌더링🎜을 의미합니다. 일반적으로 🎜Multiple Page Application🎜(Mulpile Page Application) 또는 줄여서 MPA라고도 합니다. 🎜🎜🎜🎜SPA는 처음으로 html 파일만 요청하며 이후 요청에는 JSON 데이터만 필요하므로 사용자 환경은 다음과 같습니다. 더 좋고 트래픽이 절약되므로 서버에 가해지는 부담도 줄어듭니다. 하지만 첫 화면의 로딩 시간이 길어지고, SEO 친화적이지 않습니다. 위와 같은 단점을 해결하기 위해 SSR 솔루션이 있습니다. HTML 콘텐츠는 서버에서 한 번 생성되므로 첫 화면이 빠르게 로드되며, 검색 엔진에서도 정보를 쉽게 크롤링할 수 있습니다. 그러나 동시에 SSR 솔루션에도 성능 및 개발 제한 등의 문제가 있습니다. 🎜🎜🎜🎜선택 측면에서 첫 화면 로딩 최적화가 필요하거나 SEO가 필요한 경우 SSR을 고려할 수 있습니다. 🎜🎜🎜🎜그러나 이것이 유일한 대안은 아닙니다. 예를 들어, 자주 변경되지 않는 일부 정적 웹사이트의 경우 SSR이 리소스를 낭비하는 것을 고려할 수 있습니다. 또한 nuxt.js/next.js는 SSG 정적 웹사이트 생성 솔루션을 제공합니다. 이 솔루션은 일부 CI 방법과 결합하여 좋은 최적화 효과를 얻을 수 있습니다. 🎜

28. diff 算法

回答思路：

• diff算法是干什么的？

• 必要性

• 何时执行

• 具体执行方式

• 拔高：说一下vue3中的优化

回答：

• Vue 中的 diff 算法称为 patching 算法，虚拟DOM要想转化为真实DOM就需要通过 patch 方法转换。

• 最初 Vue1.x 视图中农每个依赖均有更新函数对应，可以做到精确更新，因此不需要 虚拟DOM 和 patching 算法支持，但是这样粒度过细导致 Vue1.x 无法承载较大应用；Vue2.x 中为了降低 Watcher 粒度，每个组件只有一个 Watcher 与之对应，此时就需要引入 patching 算法才能精确找到发生变化的地方并高效更新。

• vue 中 diff 执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行 render函数 获得最新的 虚拟DOM ，然后执行 patch函数，对比新旧虚拟DOM，将其转化为对应的 DOM 操作。

• patch 过程是一个递归过程，遵循深度优先、同层比较的策略；以 vue3 的patch 为例：

  • 首先判断两个节点是否为相同同类节点，不同则删除重新创建
  • 如果双方都是文本则更新文本内容
  • 如果双方都是元素节点则递归更新子元素，同时更新元素属性
  • 更新子节点时又分了几种情况：
    • 新的子节点是文本，老的子节点是数组则清空，并设置文本；
    • 新的子节点是文本，老的子节点是文本则直接更新文本；
    • 新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
    • 新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节blabla

• vue3 中引入的更新策略：编译期优化 patchFlags、block等

29. 如何从0到1架构一个Vue项目，说说有哪些步骤，插件，目录结构怎么组织

• 从 0 创建项目我大致会做以下事情：项目构建、引入必要插件、代码规范、提交规范、常用库和组件

• 目前vue3项目我会用vite或者create-vue创建项目

• 接下来引入必要插件：vue-router、vuex/pinia、element-plus、antd-vue、axios等等

• 其他常用的库有 像lodash、dayjs、nprogress等等..

• 下面是代码规范: editorconfig、prettier、eslint

• 最后是提交规范，可以使用husky、Commitizen

• 目录结构我喜欢按照下面的结构来

+ |- /src
+   |- /assets 存放资源
+     |- /img   
+     |- /css   
+     |- /font   
+     |- /data   
+   |- base-ui  存放多个项目中都会用到的公共组件
+   |- components 存放这个项目用到的公共组件
+   |- hooks 存放自定义hook
+   |- views 视图
+   |- store 状态管理
+   |- router 路由
+   |- service 网络请求
+   |- utils 工具
+   |- global 全局注册、全局常量..

30. 你如何实现一个Vue-Router

一个 SPA 应用的路由需要解决的问题时页面跳转内容改变同时不刷新，同时路由还需要已插件形式存在，所以：

• 首先我会定义一个 createRouter 函数，返回路由器实例，实例内部做几件事；

  • 保存用户传入的配置项
  • 监听 hash 或者 popstate 事件
  • 回调里根据 path 匹配对应路由

• 将 router 定义成一个 Vue 插件，即实现 install 方法，内部做两件事：

  • 实现两个全局组件：router-link和 router-view，分别实现页面跳转和内容显示
  • 定义两个全局变量：$router 和 $route，组件内可以访问当前路由和路由器实例

31. 什么情况需要使用Vuex模块？

• 在项目规模变大的之后，单独一个store对象会过于庞大臃肿，此时通过模块方式可以拆分来便于维护

• 可以按之前规则单独编写资规模代码，然后在主文件中通过 modules 选项组织起来：createStore({modules: {...}})

• 사용시 서브모듈 상태 접근시 등록된 모듈명을 추가해야 하니 참고해주세요. 그러나 동시에 getters, mutations 및 actions는 전역 공간에 있으며 이전과 동일한 방식으로 사용할 수 있습니다. 완전한 분할을 달성하려면 서브모듈에 namespace 옵션을 추가해야 하며, 이때 서브모듈에 액세스할 때 네임스페이스 접두사를 추가해야 합니다. getters、mutations和 actions又在全局空间中，使用方式和之前一样。如果要做到完全拆分，需要在子模块加上 namespace选项，此时再访问它们就要加上命名空间前缀。

• 模块的方式可以拆分代码，但是缺点也很明显，使用起来比较繁琐，容易出错，而且类型系统支持很差，不能给我们带来帮助。pinia 显然在这方面有了很大改进，是时候切换过去了。

32. vue 组件为什么只能有1个根节点

• vue2 中组件确实只能有一个跟，但 vue3 中组件已经可以多根组件了。

• 之所以需要这样是因为 vdom 是一颗单根树形结构，patch 方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也会转换为一个 vdom，自然应该满足这个要求。

• vue3 中之所以可以写多个根节点，是因为引入了 Fragment 的概念，这是一个抽象的节点，如果发现组件时多根的，就创建一个 Fragment 节点，把多个根节点作为它的 children。将来 pathch 的时候，如果发现是一个 Fragment 节点，则直接遍历 children 创建或更新。

33. v-once 使用场景有哪些？

• v-once 是 vue 的内置指令，作用是仅渲染指定组件或元素一次，并跳过未来对其更新。

• 如果我们有一些元素或者组件再初始化渲染之后不再需要变化，这种情况下适合使用 v-once，这样哪怕这些数据变化，vue 也会跳过更新，是一种代码优化手段。

• 我们只需要作用的组件或元素上加上 v-once 即可。

补充：

• vue3.2 之后，又增加了 v-memo，这个指令可以有条件的缓存模板并控制他们的更新。

• v-once 的原理：编译器发现有 v-once 时，会将首次计算结果存入缓存对象，组件再次渲染时就会从缓存获取，从而避免再次计算。

34. 什么场景使用嵌套路由

• 在平时开发中，应用的有些界面是由多层嵌套的组件组合而来的，这种情况下，url 各部分通常对应某个嵌套的组件，vue-router 中可以使用嵌套路由表示这种关系。
• 表现形式是在两个路由间切换时，他们有公用的视图内容。此时通常提取一个父组件，内部放上 view-router，从而形成物理上的嵌套，和逻辑上的嵌套对应起来。定义嵌套路由时使用 children 属性组织嵌套关系
• 原理上是在 router-view 组件内部判断其所处嵌套的深度，将这个深度作为匹配组件数组 matched 的索引，获取对应渲染组件并渲染之。

如果你说不出来，可以直接举例子。当我开发一个页面时，如果需要显示一个顶部导航栏，通过导航栏跳转到不同的页面，而顶部的导航栏又必须要在每个页面显示时，就可以使用嵌套路由；还可以举例，当我需要查看某个列表的详情页面时，往往需要嵌套路由 （detail/:id）

35. 如何监听 Vuex 状态变化？

• watch

• store.subscribe()

watch 方式，可以以字符串形式监听 $store.state.xx; subscribe 方法参数是一个回调函数，回调函数接受mutation 对象和 state 对象，可以通过 mutation.typesubscribe

모듈 방식은 코드를 분할할 수 있지만 단점도 분명합니다. 사용하기 번거롭고 오류가 발생하기 쉬우며 유형 시스템 지원이 매우 열악하여 도움이 되지 않습니다. pinia는 분명히 이 분야에서 많이 개선되었으며 이제 전환할 시간입니다.

32. vue 구성 요소는 왜 루트 노드를 하나만 가질 수 있나요?

• vue2 구성 요소는 실제로 하나의 루트 노드만 가질 수 있지만 vue3 중간 구성 요소에는 이미 여러 루트 구성 요소가 있을 수 있습니다.

• 이것이 필요한 이유는 vdom이 단일 루트 트리 구조이기 때문입니다. patch 메서드는 순회 시 루트 노드에서 시작하며, 하나의 루트 노드. 또한 구성 요소는 vdom으로 변환되며 이는 자연스럽게 이 요구 사항을 충족해야 합니다.

  vue3에서 여러 개의 루트 노드를 작성할 수 있는 이유는 Fragment라는 개념이 도입되었기 때문입니다. 여러 루트를 사용하려면 Fragment 노드를 만들고 여러 루트 노드를 자식으로 사용하세요. 향후 pathch에서 Fragment 노드인 것으로 확인되면 children을 직접 순회하여 생성하거나 업데이트합니다.

33. v-once의 사용 시나리오는 무엇인가요? 🎜🎜🎜🎜🎜v-once는 지정된 구성요소나 요소를 한 번만 렌더링하고 향후 업데이트를 건너뛰는 vue의 내장 명령입니다. 🎜🎜🎜🎜초기 렌더링 이후 더 이상 변경할 필요가 없는 요소나 구성 요소가 있는 경우, 이 경우 v-once를 사용하는 것이 적합하므로 이러한 데이터가 변경되더라도 vue 코드 최적화 방법인 업데이트도 건너뜁니다. 🎜🎜🎜🎜작동하는 구성요소나 요소에 v-once만 추가하면 됩니다. 🎜🎜🎜추가됨: 🎜🎜🎜🎜vue3.2 그 후 v-memo가 추가되어 이 지시어는 조건부로 템플릿을 캐시하고 업데이트를 제어할 수 있습니다. . 🎜🎜🎜🎜v-once의 원리: 컴파일러가 v-once가 있음을 발견하면 첫 번째 계산 결과를 캐시 개체에 저장하고, 구성 요소가 다시 렌더링되면 재계산을 피하기 위해 캐시 가져오기에서 가져옵니다. 🎜🎜🎜🎜34. 중첩 라우팅은 어떤 시나리오에서 사용됩니까? 🎜🎜

🎜일상적인 개발에서 애플리케이션의 일부 인터페이스는 여러 계층의 중첩 구성 요소로 구성됩니다. code>url은 일반적으로 중첩된 구성 요소에 해당합니다. 이 관계를 표현하기 위해 vue-router에서 중첩 라우팅을 사용할 수 있습니다. 🎜🎜두 경로를 전환할 때 공통된 보기 콘텐츠를 갖는다는 표현입니다. 이때 일반적으로 상위 컴포넌트를 추출하고 그 안에 view-router를 배치하여 논리적 네스팅에 해당하는 물리적 네스팅을 형성한다. 중첩 경로를 정의할 때 children 속성을 ​​사용하여 중첩 관계를 구성합니다. 원칙적으로 중첩 깊이는 router-view 구성 요소 내에서 결정되며 이 깊이가 사용됩니다. 일치하는 구성 요소 배열 matched의 인덱스로 해당 렌더링 구성 요소를 가져와 렌더링합니다. 🎜

🎜🎜설명할 수 없다면 예를 들어도 됩니다. 페이지를 개발할 때 상단 탐색 모음을 표시하고 탐색 모음을 통해 다른 페이지로 이동해야 하며 상단 탐색 모음이 모든 페이지에 표시되어야 하는 경우 중첩 라우팅을 사용할 수도 있습니다. 목록의 세부정보 페이지를 확인해야 할 때 중첩된 라우팅(detail/:id)이 필요한 경우가 많습니다. 🎜🎜🎜🎜35 Vuex 상태 변경을 모니터링하는 방법은 무엇입니까? 🎜🎜🎜🎜🎜watch🎜🎜🎜🎜store.subscribe()🎜🎜🎜watch 메소드를 사용하면 $store.state.xx양식을 모니터링할 수 있습니다. 🎜 메소드 매개변수는 콜백 함수입니다. 콜백 함수는 mutation.type을 통해 수신 대상을 결정할 수 있습니다. . wtach 방법은 더 간단하고 사용하기 쉽습니다. 🎜 좀 더 번거로울 것입니다. 일반적으로 🎜🎜🎜36 Vue 인스턴스 마운트 과정에서 무슨 일이 일어났나요? 🎜🎜🎜🎜🎜인스턴스 마운트 프로세스는 app.mount()의 프로세스입니다. 일반적으로 🎜초기화🎜와 🎜업데이트 메커니즘 설정🎜🎜🎜🎜🎜초기화 회의 🎜구성 요소 인스턴스 생성🎜 두 가지 작업을 수행합니다. , 🎜 컴포넌트 상태 초기화🎜, 🎜다양한 반응형 데이터 생성🎜🎜

업데이트 재개 메커니즘의 이 단계는 구성 요소 업데이트 기능을 즉시 실행합니다. 이 기능은 처음으로 렌더링 기능을 실행하고 패치를 실행하여 이전에 얻은 vnode를 변환합니다. > into dom 동시에 내부 응답 데이터와 구성 요소 업데이트 기능 사이에 종속성을 생성하여 향후 데이터가 변경되면 해당 업데이트 기능이 실행됩니다. <code>patch 将前面获得vnode 转换为 dom；同时会创建它内部响应式数据和组件更新函数之间的依赖关系，这使得以后数据变化时会执行对应的更新函数。

37. key 的作用

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

• key 是 vue 在 patch 过程中判断两个节点是否是相同节点的关键条件（另一个是元素类型），如果不设置 key，它的值就是 undefined，vue 则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量的 dom 更新操作，明显是不可取的。

• 实际使用的过程中必须设置 key，而且应该尽量避免使用数组索引，这可能导致一些隐藏 bug。

38. watch 和 watchEffect

• watchEffect立即运行函数，被动地追踪它的依赖，传入的函数即是依赖收集的数据源，也是回调函数；watch 侦测一个或多个响应式数据源，在数据源变化时调用一个回调函数，通过 immediate 选项也可以设置立即执行一次。

• watchEffect是一种特殊的 watch。如果不关心响应式数据前后的值，可以使用 watchEffect。其他情况都可以用 watch。

39. 父子组件创建、挂载顺序

parent created  -> child created -> child mounted -> parent mounted

原因：Vue 创建是一个递归的过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加 Mounted 钩子到队列，等到 patch 结束再执行它们，可见子组件的 mounted 钩子是选进入到队列中的，因此等到 patch 结束执行这些钩子时也先执行。

40. 说说你对 Vuex 的理解

• vuex是一个专门为vue应用开发的状态管理模式库，

• 当你遇到多个组件共享状态时或者项目中的组件难以管理的时候就可以使用vuex，它以一个全局单例模式管理全局的状态。

• 基本核心概念有 state、mutation、action、getters、module等

• 说些使用过程的感受 ts不友好 模块使用繁琐 页面刷新数据也会消失

41. 什么是递归组件？使用场景有哪些？

• 如果某个组件通过组件名称引用它自己，这种情况就是递归组件。

• 类似 Tree、Menu 这类组件，它们的节点往往包含子节点，子节点结构和父节点往往是相同的。这类组件的数据往往也是树形结构，这种都是使用递归组件的典型场景。

42. 你写过自定义指令吗？

使用自定义指令分为定义、注册、和使用

• 定义有两种方式，对象和函数形式，前者类似组件定义，有各种生命周期；后者只会在 mounted 和 updated 时执行

• 注册：可以使用 app.directive 全局注册 也可以通过选项局部注册

• 使用时在注册名称前加上 v-即可。

• v-copy 复制粘贴

• v-lazy 图片懒加载

• v-debounce 防抖

• v-permission 按钮权限

• v-longpress 长按

43. Vue3新特性

API 层面

• Composition API

• setup 语法糖

• Teleport 传送门

• Fragments 可以多个根节点

• Emits

• createRenderer 自定义渲染器

• SFC 状态驱动 css 变量 (v-bind in c9ccee2e6ea535a969eb3f532ad9fe89

37. key

key의 역할은 주로 보다 효율적인 업데이트를 위한 것입니다. 가상 DOM. 🎜🎜🎜key는 patch 프로세스 중에 두 노드가 동일한 노드인지 여부를 확인하기 위한 vue의 핵심 조건입니다(다른 하나는 요소 유형), key가 설정되지 않은 경우 해당 값은 정의되지 않음입니다. vue는 항상 이들이 두 개의 동일한 노드라고 생각할 수 있으며 업데이트 작업으로 인해 다수의 dom 업데이트 작업이 발생하며 이는 분명히 바람직하지 않습니다. 🎜🎜🎜🎜키는 실제 사용 중에 설정해야 하며, 배열 인덱싱은 최대한 피해야 하며, 이로 인해 숨겨진 버그가 발생할 수 있습니다. 🎜🎜🎜

🎜38. watch 및 watchEffect🎜

🎜🎜watchEffect함수를 즉시 실행하고 수동적으로 추적하세요. 종속성, 전달된 함수는 수집된 데이터 소스에 따라 달라지며 콜백 함수이기도 합니다. watch는 하나 이상의 반응형 데이터 소스를 감지하고 를 통해 데이터 소스가 변경되면 콜백 함수를 호출합니다. 즉시 옵션을 즉시 실행하도록 설정할 수도 있습니다. 🎜🎜🎜🎜watchEffect는 특별한 watch입니다. 반응형 데이터 전후의 값에 신경쓰지 않는다면 watchEffect를 사용하면 됩니다. watch는 다른 상황에서도 사용될 수 있습니다. 🎜🎜🎜

🎜39. 상위-하위 구성요소 생성 및 마운트 순서🎜

🎜부모 생성 -> 하위 생성 -> 상위 마운트🎜🎜이유: Vue 코드 > 생성은 재귀 프로세스입니다. 🎜상위 구성 요소를 먼저 생성하고🎜 🎜하위 구성 요소가 있는 경우 하위 구성 요소를 생성🎜하므로 생성 시 상위 구성 요소가 먼저 있고 하위 구성 요소가 있을 때 하위 구성 요소가 있습니다. 처음 생성되면 <code>Mounted 후크가 실행되기 전에 <code>patch가 끝날 때까지 기다리십시오. 하위 구성 요소의 code> 후크가 🎜대기열에 선택🎜되므로 이러한 후크 실행이 완료되면 패치도 먼저 실행될 때까지 기다리세요. 🎜

🎜40. Vuex🎜

🎜🎜vuex는 vue 애플리케이션용으로 특별히 개발된 상태 관리 패턴 라이브러리입니다. 🎜🎜여러 컴포넌트 공유 상태가 발생하거나 프로젝트의 컴포넌트 관리가 어려운 경우 전역 싱글톤 모드에서 전역 상태를 관리하는 vuex를 사용할 수 있습니다. 🎜🎜🎜🎜기본 핵심 개념에는 상태, 돌연변이, 액션, 게터, 모듈 등이 포함됩니다. 🎜🎜🎜🎜ts에 친숙하지 않은 모듈을 사용한 경험을 알려주세요. 번거로운 페이지 새로 고침 데이터도 사라집니다🎜🎜🎜

🎜41. 재귀적 구성요소란 무엇인가요? 사용 시나리오는 무엇입니까? 🎜

🎜🎜구성 요소가 구성 요소 이름을 통해 자신을 참조하는 경우 이는 재귀 구성 요소입니다. 🎜🎜🎜🎜Tree 및 Menu와 같은 구성 요소와 유사하며 해당 노드에는 하위 노드가 포함되는 경우가 많으며 하위 노드 구조는 상위 노드와 동일한 경우가 많습니다. 이러한 구성 요소의 데이터는 일반적으로 재귀 구성 요소를 사용하는 일반적인 시나리오인 트리 구조로 되어 있습니다. 🎜🎜🎜

🎜42. 맞춤 명령어를 작성해 본 적이 있나요? 🎜

🎜사용자 정의 명령 사용은 🎜정의, 등록, 사용🎜🎜
🎜🎜정의하는 방법에는 개체와 함수 형식의 두 가지가 있으며, 전자는 구성 요소 정의와 유사하며 다양한 수명 주기가 있습니다. 후자는 마운트 및 업데이트할 때만 실행됩니다. 🎜🎜🎜🎜등록: 앱을 사용할 수 있습니다. .directive code> 글로벌 등록은 🎜🎜🎜🎜옵션을 통해 로컬로 등록할 수도 있습니다. 사용 시 등록 이름 앞에 v-를 추가하면 됩니다. 🎜🎜🎜🎜<code>v-copy 복사하여 붙여넣기🎜🎜🎜🎜v-lazy 이미지 지연 로딩🎜🎜🎜🎜v-debounce 흔들기🎜 🎜🎜🎜v-permission 버튼 권한🎜🎜🎜🎜v-longpress 길게 누르기🎜🎜🎜

🎜43 Vue3 새로운 기능🎜

🎜🎜 API 레벨🎜🎜
🎜🎜Composition API🎜🎜🎜🎜setup 구문 설탕🎜🎜🎜🎜 Teleport Portal🎜🎜🎜🎜Fragments는 여러 개의 루트 노드🎜🎜🎜🎜Emits 🎜🎜🎜🎜createRenderer를 가질 수 있습니다. 렌더러 정의 🎜🎜🎜🎜SFC 상태 기반 css 변수(c9ccee2e6ea535a969eb3f532ad9fe89의 v-bind)🎜🎜🎜🎜🎜In 이후 게다가 Vue3에는 프레임워크 수준에서도 많은 개선이 이루어졌습니다🎜🎜
• 더 빠르게
  • 가상 DOM 재작성
  DOM 重写
• 编译器优化：静态提升、patchFlags、block 等
• 基于 Proxy 的响应式系统
• 更小：更好的摇树优化
• 更容易维护：TS + 模块化
• 更容易扩展
  • 独立的响应化模块
  • 自定义渲染器

44. Vue3设计目标和优化点

最大设计目标就是替代 Vue2，为了实现这一点，Vue3 在以下几个方面做了很大改进，如：易用性，框架性能、扩展性、可维护性、开发体验等

• 易用性方面：主要有 API 简化 v-model 变成了 v-model 和 sync 修饰符的结合体。类似的还有 h(type,props,children) 函数中的 props 不用考虑区分属性、特性、事件等，框架替我们判断，易用性增。

• 开发体验方面：新组建 Teleport Fragment Suspense 等都会简化特定场景的代码编写。 setup 语法糖更是极大提升了我们的开发体验。

• 扩展性方面提升： 如独独立的 reactivity 模块，custom render API等

• 可维护性方面主要是 Composition API，更容易编写高复用性的业务逻辑。还有对TS支持的提升。

• 性能方面：编译器优化、基于 Proxy 的响应式系统。

• 。。。

45. Vue3性能提升体现在哪些方面？

• 代码方面：全新的响应式API，基于 Proxy 实现，初始化事件和内存占用均大幅改进；

• 编译方面：做了更多编译优化处理，比如静态提升、动态内容标记、事件缓存、区块等，可以有效跳过大量diff过程

• 打包方面：更好的支持 tree-shaking ，因此体积更小，加载更快.（因为vue3 所有的API都通过ES6模块化的方式引入，这样就能让webpack或rollup等打包工具在打包时对没有用到API进行剔除，最小化bundle体积）

46. $attrs 和 $listeners 是做什么的？

$attrs 获取没有在 props 中定义的属性，v-bind="$attrs" 可以用于属性透传$listeners 用于获取事件，vue3 中已经移除合并到 attrs 中，使用起来更方便

47. Composition API 和 Option API 有何不同？

Composition API 是一组API，包括 Reactivity API、生命钩子、依赖注入，使用户可以通过导入函数方式编写组件，而 Options API 则通过声明组件选项的对象形式编写组件。

Composition API 更简洁、逻辑复用更高效。解决的过去 Options API 中 mixins 的各种缺点（会冲突很混乱）；另外 Composition API 更自由，没有 Options API 那样固定的写法，并且可以更有效的将逻辑代码组织在一起，而不用东一块西一块搞得很混乱，最后 Composition API 拥有更好的类型推断，对 ts 支持友好。

48. 你知道哪些 Vue 最佳实践

编码风格方面：

• 组件命名时使用 多词风格避免和html元素冲突

• 属性名峰命名，模板或jsx中使用 肉串命名

• v-for 务必加上key 且不要和v-if写在一起‘’

性能方面：

• 路由懒加载减少应用尺寸

• SSR 减少首屏加载事件

• v-once v-memo

• 长列表 虚拟滚动技术

• 对于深层嵌套对象的大数据可以使用 shallowRef 或 shallowReactive 降低开销

• 避免不必要的组件抽象

49. mutation 和 action 的区别？

mutation 用于修改 stateaction 用于提交一个 mutation，而且 action 可以包含异步操作

50. 如何从0实现vuex

• 要实现一个 Store 存储全局状态

• 要提供修改状态所需的API：commit({type, payload}), dispatch(type,payload)컴파일러 최적화: 정적 승격, patchFlags, block 등

프록시
를 기반으로 한 반응형 시스템🎜더 작음: 더 나은 트리 쉐이킹 최적화🎜더 쉬운 유지 관리: TS + 모듈화 🎜 더욱 쉬워진 확장🎜🎜독립적인 반응형 모듈 🎜맞춤형 렌더러

44. Vue3 디자인 목표 및 최적화 포인트

가장 큰 디자인 목표는 Vue2를 대체하는 것입니다. 이를 달성하기 위해 Vue3는 다음과 같은 주요 개선 사항을 많이 수행했습니다. 사용 편의성, 프레임워크 성능, 확장성, 유지 관리성, 개발 경험 등🎜

🎜

사용 편의성 측면: 주로API code>는 v-model을 v-model 및 sync 수정자의 조합으로 단순화합니다. 마찬가지로 h(type,props,children) 함수에는 props가 있습니다. 프레임워크에서는 속성, 특성, 이벤트 등을 구별하는 것을 고려할 필요가 없습니다. 사용의 용이성을 높이는 우리에 대한 판단. 🎜🎜

개발 경험 측면에서: Teleport Fragment Suspense와 같은 새로운 구성 요소는 특정 시나리오에 대한 코드 작성을 단순화합니다. . setup Syntactic sugar는 개발 경험을 크게 향상시켰습니다. 🎜🎜

확장성 향상: 독립적인 반응성 모듈, 사용자 정의 렌더링 API 등. 🎜🎜

유지관리 가능 기능적으로는 주로 재사용 가능성이 높은 비즈니스 로직을 더 쉽게 작성할 수 있게 해주는 Composition API입니다. TS 지원도 개선되었습니다. 🎜🎜

성능: 컴파일러 최적화, 프록시 기반 반응형 시스템. 🎜🎜

. . . 🎜

45. Vue3의 성능 향상은 어떤 측면에서 반영되나요?

🎜

코드 측면: 프록시 구현, 초기화 이벤트 및 🎜🎜

컴파일 측면에서 정적 승격, 동적 콘텐츠 태그 지정, 이벤트 캐싱, 블록 등과 같은 더 많은 컴파일 최적화가 수행되어 효과적으로 건너뛸 수 있습니다. 다수의 diff 프로세스🎜🎜

패키징: 트리 쉐이킹에 대한 지원이 향상되어 크기가 더 작고 로딩이 더 빠릅니다. (vue3의 모든 API는 ES6 도입을 통해 모듈화되어 웹팩이나 롤업과 같은 패키징 도구가 패키징 중에 사용되지 않는 API를 제거하고 번들 크기를 최소화할 수 있습니다)🎜

46. code>$attrs

와 $listeners는 무엇을 하나요?

$attrs props에 정의되지 않은 속성 가져오기, v-bind="$attrs" 가능 이벤트를 얻기 위해 속성 투명 전송 $listeners에 사용됩니다. vue3가 제거되고 attrs로 병합되어 사용이 더 편리해졌습니다🎜 47. Composition API와 Option API의 차이점은 무엇인가요?

Composition API는 Reactivity API, 라이프 후크, 종속성 주입을 포함한 API 세트로, 사용자가 가져오기를 통해 작성할 수 있습니다. 함수 구성요소, Options API는 해당 옵션을 객체로 선언하여 구성요소를 작성합니다. 🎜

Composition API가 더 간결해지고 로직 재사용이 더 효율적입니다. 과거 Options API의 다양한 단점(충돌 및 혼란)을 해결했습니다. 또한 Composition API는 더 자유롭고 그렇지 않습니다. Options API에는 고정된 작성 방법이 있으며, 여기저기서 혼동을 일으키는 대신 논리 코드를 보다 효율적으로 정리할 수 있습니다. 마지막으로 Composition API에는 있습니다. 더 나은 유형 추론. ts 지원에 적합합니다. 🎜

48. 알고 있는 Vue 모범 사례

코딩 스타일:🎜

🎜

HTML 요소와의 충돌을 피하기 위해 구성 요소 이름을 지정할 때 여러 단어 스타일을 사용하세요🎜🎜

최대 속성 이름을 지정하고 템플릿이나 jsx에서 고기 꼬치를 사용하여 이름을 지정하세요🎜🎜

v-for는 키를 추가해야 하며 v-if''🎜

성능:🎜

🎜

지연 로딩 라우팅으로 애플리케이션 크기 감소🎜🎜

SSR 첫 번째 화면 로딩 이벤트 감소🎜🎜

v-once

v-memo🎜🎜

긴 목록 가상 스크롤 기술🎜🎜

깊이 있는 빅데이터에 사용할 수 있습니다. 중첩된 객체 오버헤드를 줄이려면 shallowRef 또는 shallowReactive를 사용하세요🎜🎜

불필요한 구성요소 추상화를 피하세요🎜

49. 돌연변이와 행동의 차이점은 무엇인가요?

mutation은 state를 수정하는 데 사용됩니다.action은 mutation을 제출하는 데 사용됩니다. code> 및 action에는 비동기 작업이 포함될 수 있습니다🎜

50. 0에서 vuex를 구현하는 방법

🎜

전체 상태를 저장하기 위해 Store를 구현하려면🎜🎜

상태를 수정하는 데 필요한 API를 제공하려면: commit({type, 페이로드}) code>, <code>디스패치(유형, 페이로드)🎜

Store를 구현하면 Store 클래스를 정의할 수 있고 생성자는 options 옵션을 허용하고 state 속성을 설정합니다. code>는 <code>commit 및 dispatch 수정 속성을 제공하여 외부 상태에 노출됩니다. 여기서는 state를 반응형 개체로 설정하고 Store를 Vue 플러그인(설치 방법)으로 정의해야 합니다. Store，可以定义 Store 类，构造函数接受选项 options，设置属性 state 对外暴露状态，提供 commit 和 dispatch 修改属性。这里需要设置 state 为响应式对象，同时将 Store 定义为一个 Vue 插件(install方法)。

commit 可以获取用户传入 mutations  并执行它，这样可以按用户提供的方法修改状态，dispatch 类似，但是 dispatch 需要返回一个 Promise

commit은 사용자가 전달한 mutations를 가져와 실행할 수 있으므로 사용자가 제공한 디스패치 방법에 따라 상태가 수정될 수 있습니다. 는 유사하지만 dispatch는 비동기 결과를 처리하기 위해 사용자에게 Promise를 반환해야 합니다.

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

)🎜

위 내용은 [편집 및 요약] 지식 포인트를 통합하는 데 도움이 되는 45개 이상의 Vue 인터뷰 질문!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!