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

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

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

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 <를 가져옵니다. code> 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의 두 가지 옵션이 있는 객체를 전달합니다. 함수가 전달되면 기본값은 <입니다. code> get옵션. watch는 객체를 전달하고 vue3 watch< /code와 같은 옵션을 설정할 수 있습니다. >에는 몇 가지 변경이 있었습니다. 예를 들어 도트 연산자 이외의 문자열 표현식을 더 이상 감지할 수 없으며 reactivity APIwatchEffectwatch및 가 있습니다. >은 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 상태 변경을 모니터링하는 방법은 무엇입니까? watchstore.subscribe()watch메소드를 사용하면$store.state.xx양식을 모니터링할 수 있습니다. 메소드 매개변수는 콜백 함수입니다. 콜백 함수는mutation.type을 통해 수신 대상을 결정할 수 있습니다.. wtach 방법은 더 간단하고 사용하기 쉽습니다. 좀 더 번거로울 것입니다. 일반적으로 36 Vue 인스턴스 마운트 과정에서 무슨 일이 일어났나요? 인스턴스 마운트 프로세스는 app.mount()의 프로세스입니다. 일반적으로 초기화와 업데이트 메커니즘 설정초기화 회의 구성 요소 인스턴스 생성 두 가지 작업을 수행합니다. , 컴포넌트 상태 초기화, 다양한 반응형 데이터 생성

  • 업데이트 재개 메커니즘의 이 단계는 구성 요소 업데이트 기능을 즉시 실행합니다. 이 기능은 처음으로 렌더링 기능을 실행하고패치를 실행하여 이전에 얻은vnode를 변환합니다. > intodom 동시에 내부 응답 데이터와 구성 요소 업데이트 기능 사이에 종속성을 생성하여 향후 데이터가 변경되면 해당 업데이트 기능이 실행됩니다. 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