이 기사에는 수집할 가치가 있는 2023년 선정 항목vue자주 자주 나오는 인터뷰 질문(답변 포함)이 요약되어 있습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
(학습 영상 공유: vue 영상 튜토리얼)
Object.defineProperty 자체에는 배열 첨자의 변경 사항을 모니터링하는 특정 기능이 있지만 Vue에서는 성능/경험의 비용 효율성을 고려하여 이 기능이 포기되었습니다(Vue가 배열 변경 사항을 감지할 수 없는 이유). 이 문제를 해결하기 위해 Vue 내부 처리 후 다음 방법을 사용하여 배열을 모니터링할 수 있습니다
push(); pop(); shift(); unshift(); splice(); sort(); reverse();
위 7가지 방법만 해킹되었기 때문에 다른 배열의 속성을 감지할 수 없으며 여전히 일정한 제한이 있습니다. .
Object.defineProperty는 객체의 속성만 하이재킹할 수 있으므로 각 객체의 각 속성을 순회해야 합니다. Vue 2.x에서는 데이터 객체의 재귀 + 순회를 통해 데이터 모니터링이 이루어집니다. 속성 값도 객체라면 심층 탐색이 필요합니다. 물론 완전한 객체를 탈취할 수 있다면 더 나은 선택입니다.
프록시는 전체 개체를 하이재킹하고 새 개체를 반환할 수 있습니다. 프록시는 객체뿐만 아니라 프록시 배열도 프록시할 수 있습니다. 동적으로 추가된 속성을 프록시할 수도 있습니다.
키를 사용하지 않는 경우 Vue는 동적 요소를 최소화하고 동일한 유형의 요소를 최대한 수정/재사용하는 알고리즘을 사용합니다. 키는 Vue에서 vnode에 대한 유일한 표시입니다. 이 키를 통해 diff 작업이 더 정확하고 빨라질 수 있습니다
더 정확합니다: 키를 사용하면 동일한 노드 함수에서 재사용되지 않습니다. key === b.key는 비교 중에 내부 재사용을 피할 수 있습니다. 그래서 더 정확할 것입니다.
Faster: 키의 고유성을 사용하여 맵 객체를 생성하고 해당 노드를 얻는 것이 순회 방법보다 빠릅니다.
템플릿을 사용합니다. 주요 프로세스인 Vue의 컴파일 원리:
템플릿을 ast 트리로 변환하고, ast는 객체를 사용하여 실제 JS 구문을 설명합니다(실제 DOM을 가상으로 변환) DOM) ast 树， ast 用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）
优化树
将 ast 树生成代码
Vue 是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能， Vue 会在本轮数据更新后，在异步更新视图。核心思想 nextTick 。
dep.notify（） 通知 watcher进行更新， subs[i].update 依次调用 watcher 的 update ， queueWatcher 将watcher 去重放入队列， nextTick（ flushSchedulerQueue
ast 트리에서 코드 생성Vue가 비동기 렌더링을 사용하는 이유는 무엇인가요?
Vue는 구성 요소 수준 업데이트입니다. 비동기 업데이트를 사용하지 않으면 데이터가 업데이트될 때마다 현재 구성 요소가 다시 렌더링됩니다. 따라서 >Vue는 데이터 업데이트 라운드 후에 뷰가 비동기적으로 업데이트됩니다. 핵심 아이디어 nextTick.
dep.notify()는 감시자에게 업데이트를 알리고, subs[i].update는 감시자의 업데이트를 차례로 호출합니다. queueWatcher 감시자를 대기열에 넣으면 nextTick(<code> flashSchedulerQueue)은 다음 틱에서 감시자 대기열을 (비동기적으로) 새로 고칩니다. MVC와 MVVM의 차이점
MVC
MVC의 정식 이름은 Model View Controller로, Model-View-Controller의 약자로 소프트웨어 설계 모델입니다🎜🎜🎜 모델 : 애플리케이션의 일부 애플리케이션 데이터의 논리를 처리합니다. 일반적으로 모델 객체는 데이터베이스의 데이터에 액세스하는 역할을 담당합니다. 🎜🎜View: 데이터 표시를 처리하는 애플리케이션의 일부입니다. 일반적으로 뷰는 모델 데이터를 기반으로 생성됩니다. 🎜🎜컨트롤러: 사용자 상호 작용을 처리하는 애플리케이션의 일부입니다. 일반적으로 컨트롤러는 뷰에서 데이터를 읽고, 사용자 입력을 제어하고, 모델에 데이터를 보내는 일을 담당합니다. MVC의 개념은 컨트롤러가 뷰를 사용하여 모델의 데이터를 표시하는 일을 담당한다는 것입니다. 즉, Model이 Controller에 표시됩니다. 데이터는 View에 할당됩니다. 🎜🎜🎜MVVM🎜🎜🎜MVVM에 새로운 VM 클래스가 추가되었습니다🎜MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）
整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM 元素。因为在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也观察不到 View，这种低耦合模式提高代码的可重用性
注意：Vue 并没有完全遵循 MVVM 的思想 这一点官网自己也有说明
那么问题来了 为什么官方要说 Vue 没有完全遵循 MVVM 思想呢？
- 严格的 MVVM 要求 View 不能和 Model 直接通信，而 Vue 提供了$refs 这个属性，让 Model 可以直接操作 View，违反了这一规定，所以说 Vue 没有完全遵循 MVVM。
1）Vue为什么要用vm.$set() 解决对象新增属性不能响应的问题
Vue使用了Object.defineProperty实现双向数据绑定
在初始化实例时对属性执行 getter/setter 转化
属性必须在data对象上存在才能让Vue将它转换为响应式的（这也就造成了Vue无法检测到对象属性的添加或删除）
所以Vue提供了Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)
2）接下来我们看看框架本身是如何实现的呢?
Vue 源码位置：vue/src/core/instance/index.js
export function set (target: Array<any> | Object, key: any, val: any): any {
// target 为数组
if (Array.isArray(target) && isValidArrayIndex(key)) {
// 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
target.length = Math.max(target.length, key)
// 利用数组的splice变异方法触发响应式
target.splice(key, 1, val)
return val
}
// key 已经存在，直接修改属性值
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}
const ob = (target: any).__ob__
// target 本身就不是响应式数据, 直接赋值
if (!ob) {
target[key] = val
return val
}
// 对属性进行响应式处理
defineReactive(ob.value, key, val)
ob.dep.notify()
return val
}我们阅读以上源码可知，vm.$set 的实现原理是：
如果目标是数组，直接使用数组的 splice 方法触发相应式；
如果目标是对象，会先判读属性是否存在、对象是否是响应式，
最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理
defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法
Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。
相关代码如下
import { mutableHandlers } from "./baseHandlers"; // 代理相关逻辑
import { isObject } from "./util"; // 工具方法
export function reactive(target) {
// 根据不同参数创建不同响应式对象
return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {
if (!isObject(target)) {
return target;
}
const observed = new Proxy(target, baseHandler);
return observed;
}
const get = createGetter();
const set = createSetter();
function createGetter() {
return function get(target, key, receiver) {
// 对获取的值进行放射
const res = Reflect.get(target, key, receiver);
console.log("属性获取", key);
if (isObject(res)) {
// 如果获取的值是对象类型，则返回当前对象的代理对象
return reactive(res);
}
return res;
};
}
function createSetter() {
return function set(target, key, value, receiver) {
const oldValue = target[key];
const hadKey = hasOwn(target, key);
const result = Reflect.set(target, key, value, receiver);
if (!hadKey) {
console.log("属性新增", key, value);
} else if (hasChanged(value, oldValue)) {
console.log("属性值被修改", key, value);
}
return result;
};
}
export const mutableHandlers = {
get, // 当获取属性时调用此方法
set, // 当修改属性时调用此方法
};简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：
首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。
Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。
编译的最后一步是将优化后的AST树转换为可执行的代码。
优点:
缺点:
diff 알고리즘은 vue Convert에 의해 최적화된 O(n*3)의 시간 복잡도입니다. O(n)으로 변경하세요. 이해하세요: diff 算法是一个时间复杂度为 O(n*3） ，vue进行优化转化成 O(n) 。
理解：
最小量更新， key 很重要。这个可以是这个节点的唯一标识，告诉 diff 算法，在更改前后它们是同一个DOM节点
v-for 为什么要有 key ，没有 key 会暴力复用，举例子的话随便说一个比如移动节点或者增加节点（修改DOM），加 key 只会移动减少操作DOM。diff算法的优化策略：四种命中查找，四个指针
--- 问完上面这些如果都能很清楚的话，基本O了 ---
以下的这些简单的概念，你肯定也是没有问题的啦?
kb ；angular 的特点，在数据操作方面更为简单；react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；react 而言，同样是操作虚拟 dom，就性能而言， vue
키는 매우 중요합니다. 이는 이 노드의 고유 식별자일 수 있으며 diff 알고리즘에 변경 전후에 동일한 DOM 노드임을 알려줍니다.
v-for가 있는 이유 키가 없으면 폭력적인 재사용이 발생합니다. 예를 들어 노드를 이동하거나 노드를 추가하면 됩니다(DOM 수정). DOM만 이동하고 축소합니다.
동일한 가상 노드인 경우에만 자세한 비교가 이루어집니다. 그렇지 않으면 이전 노드가 강제로 삭제되고 새 노드가 삽입됩니다.
동일한 레이어 내에서만 비교가 이루어지며, 레이어 간 비교는 이루어지지 않습니다.Old before와 new before(먼저 시작을 비교한 다음 노드 삽입 및 삭제)
Old 이전과 New 이후 (머리와 꼬리를 비교하면 노드 이동이 수반되며 새 프런트가 가리키는 노드는 이전 노드 이후로 이동됩니다)
--- 요청한 후 명확하게 할 수 있다면 위의 질문이라면 기본적으로는 O---
kb입니다. angular 기능을 유지하여 데이터 작업을 더 간단하게 만듭니다. 구성요소화: react의 장점을 유지하고 html의 캡슐화 및 재사용을 실현합니다. 단일 페이지 애플리케이션 구축 시 고유한 장점이 있습니다. dom 작업 노드는 더 이상 사용되지 않으므로 dom 작업이 크게 자유로워집니다. 특정 작업은 여전히 dom이며 실행 속도가 더 빠릅니다. react에 비해 가상 dom도 작동하므로 성능 측면에서 vue에는 큰 장점이 있습니다. 라우팅 후크의 실행 프로세스는 글로벌 가드, 라우팅 가드, 컴포넌트 가드입니다.
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点），详细步骤如下：
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）
Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。
什么时候被调用？
watch/event 事件回调。无 $el . render 函数首次被调用vm.$el替换，并挂载到实例上去之后调用改钩子。每个生命周期内部可以做什么？
ajax放在哪个生命周期？：一般放在 mounted 中，保证逻辑统一性，因为生命周期是同步执行的， ajax 是异步执行的。单数服务端渲染 ssr 同一放在 created 中，因为服务端渲染不支持 mounted 方法。 什么时候使用beforeDestroy？：当前页面使用 $on ，需要解绑事件。清楚定时器。解除事件绑定， scroll mousemove 。
受现代 JavaScript 的限制 ，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？
我们查看对应的 Vue 源码：vue/src/core/instance/index.js
export function set (target: Array<any> | Object, key: any, val: any): any {
// target 为数组
if (Array.isArray(target) && isValidArrayIndex(key)) {
// 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
target.length = Math.max(target.length, key)
// 利用数组的splice变异方法触发响应式
target.splice(key, 1, val)
return val
}
// key 已经存在，直接修改属性值
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}
const ob = (target: any).__ob__
// target 本身就不是响应式数据, 直接赋值
if (!ob) {
target[key] = val
return val
}
// 对属性进行响应式处理
defineReactive(ob.value, key, val)
ob.dep.notify()
return val
}我们阅读以上源码可知，vm.$set 的实现原理是：
위 내용은 2023년 Vue 고빈도 면접 질문 공유(답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
