면접관이 갑자기 질문했습니다. Vue2와 Vue3의 차이점은 무엇입니까?

서문

프런트엔드가 죽었다는 말이 지금 인터넷에서 입소문을 타고 있습니다. 사실 가장 근본적인 이유는 인원은 늘어나고 직위는 줄어들어 경쟁압력이 높아지기 때문입니다. .

기존 사회 문제를 해결할 수 있는 방법은 없지만 경쟁력을 높이기 위해서는 우리 스스로부터 시작할 수 있습니다.

여러 사람이 한 자리를 놓고 경쟁할 때 실제로는 2등과 꼴찌의 차이가 없습니다. 왜냐하면 그들은 1등만을 원하기 때문입니다.

그래서 모든 질문에 100점을 맞추는 것이 매우 중요합니다!

'면접관을 혼란스럽게 만드는 한 가지 질문'을 열게 된 이유이기도 합니다.

이 주제는 모든 사람이 각 질문에서 100점을 얻고 최단 시간에 면접관을 "압도"하는 데 도움이 되기를 희망합니다. 손안에 있는 모든 면접 기회를 소중히 여기시고, 모두 하루빨리 좋아하는 회사에 높은 연봉으로 입사하시길 바랍니다

"vue2와 vue3의 차이점"

Vue을 묻는다면 어떻게 대답해야 할까요? Vue 内部根据功能可以被分为三个大的模块：响应性 reactivite、运行时 runtime、编辑器 compiler，以及一些小的功能点。那么要说 vue2 与 vue3 的区别，我们需要从这三个方面加小的功能点进行说起。

首先先来说 响应性 reactivite：

vue2 的响应性主要依赖 Object.defineProperty 进行实现，但是 Object.defineProperty 只能监听 指定对象的指定属性的 getter 行为和 setter 行为，那么这样在某些情况下就会出现问题。

什么问题呢？

比如说：我们在 data 中声明了一个对象 person ，但是在后期为 person 增加了新的属性，那么这个新的属性就会失去响应性。想要解决这个问题其实也非常的简单，可以通过 Vue.$set 方法来增加 指定对象指定属性的响应性。但是这样的一种方式，在 Vue 的自动响应性机制中是不合理。

所以在 Vue3 中，Vue 引入了反射和代理的概念，所谓反射指的是 Reflect，所谓代理指的是 Proxy。我们可以利用 Proxy 直接代理一个普通对象，得到一个 proxy 实例 的代理对象。在 vue3 中，这个过程通过 reactive 这个方法进行实现。

但是 proxy 只能实现代理复杂数据类型，所以 vue 额外提供了 ref 方法，用来处理简单数据类型的响应性。ref 本质上并没有进行数据的监听，而是构建了一个 RefImpl 的类，通过 set 和 get 标记了 value 函数，以此来进行的实现。所以 ref 必须要通过 .value 进行触发，之所以要这么做本质是调用 value 方法。

接下来是运行时 runtime：

所谓的运行时，大多数时候指的是 renderer 渲染器，渲染器本质上是一个对象，内部主要三个方法 render、hydrate、createApp ，其中 render 主要处理渲染逻辑，hydrate 主要处理服务端渲染逻辑，而 createApp 就是创建 vue 实例的方法。

这里咱们主要来说 render 渲染函数，vue3 中为了保证宿主环境与渲染逻辑的分离，把所有与宿主环境相关的逻辑进行了抽离，通过接口的形式进行传递。这样做的目的其实是为了解绑宿主环境与渲染逻辑，以保证 vue 在非浏览器端的宿主环境下可以正常渲染。

再往下是 编辑器 compiler：

vue 中的 compiler 其实是一个 DSL（特定领域下专用语言编辑器） ，其目的是为了把 template 模板 编译成 render 函数。 逻辑主要是分成了三大步： parse、transform 和 generate。其中 parse 的作用是为了把 template 转化为 AST（抽象语法树），transform 可以把 AST（抽象语法树） 转化为 JavaScript AST，最后由 generate 把 JavaScript AST 通过转化为 render 函数응답성 반응성, 런타임 런타임, 편집기 컴파일러 및 일부 작은 기능 포인트 등 기능 모듈을 기반으로 세 가지 주요 내부 요소로 나눌 수 있습니다. 따라서 vue2와 vue3의 차이점에 대해 이야기하려면 이 세 가지 측면부터 시작하여 더 작은 기능 포인트를 추가해야 합니다.

먼저 🎜응답성 reactivite🎜에 대해 이야기해 보겠습니다. 🎜🎜vue2의 응답성은 주로 구현을 위해 Object.defineProperty에 의존합니다. 그러나 Object.defineProperty는 지정된 개체의 지정된 속성에 대한 getter 동작 및 setter 동작만 모니터링할 수 있으므로 일부에서는 문제가 발생할 수 있습니다. 사례. 🎜🎜무엇이 문제인가요? 🎜🎜예를 들어 data에서 person 개체를 선언했지만 나중에 person에 새 속성을 추가하면 이 새 속성은 응답성을 잃게 됩니다. 이 문제를 해결하는 것은 실제로 매우 간단합니다. Vue.$set 메소드를 사용하여 지정된 객체🎜의 지정된 속성의 응답성을 높일 수 있습니다. 그러나 이러한 접근 방식은 Vue의 자동 응답 메커니즘에서는 비합리적입니다. 🎜🎜그래서 Vue3에서는 Vue에서 리플렉션과 프록시의 개념을 소개합니다. 소위 리플렉션은 Reflect를 의미하고, 프록시는 프록시를 나타냅니다. 프록시를 사용하여 공통 객체를 직접 프록시하고 프록시 인스턴스의 프록시 객체를 얻을 수 있습니다. vue3에서 이 프로세스는 reactive 메서드를 통해 구현됩니다. 🎜🎜그러나 proxy는 프록시 복합 데이터 유형만 구현할 수 있으므로 vue는 단순 데이터 유형의 응답성을 처리하기 위해 ref 메소드를 추가로 제공합니다. ref는 기본적으로 데이터를 모니터링하지 않지만 set 및 get를 통해 RefImpl 클래스를 빌드합니다. value 함수를 구현합니다. 따라서 ref는 .value를 통해 트리거되어야 합니다. 이 작업의 핵심은 value 메서드를 호출하는 것입니다. 🎜🎜다음은 🎜런타임 런타임🎜입니다. 🎜🎜소위 런타임은 대부분 렌더러 렌더러를 참조합니다. 세 가지 주요 내부 메서드인 render, hydrate, createApp 중 render는 주로 렌더링 로직을 처리하고, hydrate는 주로 서버측 렌더링 로직을 처리하며, createApp는 vue 인스턴스를 생성하는 메소드입니다. 🎜🎜여기에서는 주로 렌더링 렌더링 기능에 대해 이야기합니다. 호스트 환경과 렌더링 로직의 분리를 보장하기 위해 vue3는 호스트 환경과 관련된 모든 로직을 분리합니다. . 인터페이스를 통해 전달됩니다. 이것의 목적은 실제로 vue가 브라우저가 아닌 호스트 환경에서 정상적으로 렌더링될 수 있도록 호스트 환경과 렌더링 로직을 바인딩 해제하는 것입니다. 🎜🎜더 아래에는 🎜editor compiler🎜가 있습니다. 🎜🎜vue의 compiler는 실제로 DSL입니다(특정 필드 아래 특수 언어 편집기) 의 목적은 템플릿 템플릿을 렌더링 함수로 컴파일하는 것입니다. 로직은 주로 파싱, 변환, 생성이라는 세 가지 주요 단계로 나뉩니다. parse의 기능은 template을 AST(Abstract Syntax Tree)로 변환하는 것이고, transform은 를 변환할 수 있습니다. >AST(Abstract Syntax Tree)는 JavaScript AST로 변환되고, 마지막으로 generate는 JavaScript AST를 렌더링 함수로 변환합니다. . 변환 프로세스에는 🎜Finite Automatic State Machine🎜과 ​​같은 약간 복잡한 개념이 포함됩니다. 여기서는 이에 대해 논의하지 않습니다. 🎜

이 외에도 몇 가지 변경 사항이 있습니다. 예를 들어 vue3의 새로운 composition API가 있습니다. composition API는 vue3.0 및 vue3.2에서 몇 가지 다른 표현을 갖습니다. 예를 들어 원래 composition API setup 함수를 입력 함수로 사용합니다. setup 함수는 두 가지 유형의 값을 반환해야 합니다. 첫 번째는 개체이고 두 번째는 함수입니다. vue3 新增的 composition API。 composition API 在 vue3.0 和 vue3.2 中会有一些不同的呈现，比如说：最初的 composition API 以 setup 函数作为入口函数， setup 函数必须返回两种类型的值：第一是对象，第二是函数。

当 setup 函数返回对象时，对象中的数据或方法可以在 template 中被使用。当 setup 函数返回函数时，函数会被作为 render 函数。

但是这种 setup 函数的形式并不好，因为所有的逻辑都集中在 setup 函数中，很容易出现一个巨大的 setup 函数，我们把它叫做巨石（屎山）函数。所以 vue 3.2 的时候，新增了一个 script setup 的语法糖，尝试解决这个问题。目前来看 script setup 的呈现还是非常不错的。

除此之外还有一些小的变化，比如 Fragment、Teleport、Suspense

setup 함수가 개체를 반환하면 개체의 데이터나 메서드를 템플릿에서 사용할 수 있습니다. setup 함수가 함수를 반환하면 해당 함수는 render 함수로 처리됩니다.

하지만 이 setup 함수의 형태는 좋지 않습니다. 왜냐하면 모든 로직이 setup 함수에 집중되어 있고, 거대한 설정을 하기 쉽기 때문입니다. code> 함수를 볼더(Shishan) 함수라고 부릅니다. 따라서 <code>vue 3.2에서는 이 문제를 해결하기 위해 script setup의 새로운 구문 설탕이 추가되었습니다. 현재 스크립트 설정의 표현은 여전히 ​​매우 좋습니다.

이 외에도 Fragment, Teleport, Suspense 등과 같은 몇 가지 작은 변경 사항이 있는데 이에 대해서는 다루지 않겠습니다...

🎜추천 학습: "🎜vue.js video 튜토리얼🎜》🎜🎜

위 내용은 면접관이 갑자기 질문했습니다. Vue2와 Vue3의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!